如何将图标放置在输入字段旁边或内部

How I can put my icon next to or within the input field?

The problem is, the icon changes the form. Usually, it's like this:

但是当我添加图标（下面的代码）时，它取代了Dauer输入字段。

有没有办法让它看起来干净，旁边那个呢？还是在输入框里面更好？

我可以用 CSS 使按钮变小，但它们之间仍然有间隙..而且它不会自动移动。

最好的解决方案就像Datum上面有一个小图标，我可以在其中单击，或者该图标位于 Dauer 旁边，Dauer 的输入字段和 Dauer 的输入字段之间没有间隙? icon.

PS: I just want it like this (I will decide then later which option is better. But it is possible?)

<form:SimpleForm id="neuezeiterfassung"
  editable="true"
  title="Neue Zeiterfassung anlegen"
>
  <Label
    text="Auftrag"
    class="font1"
    tooltip="Auftrag eingeben"
  />
  <l:VerticalLayout>
    <ComboBox id="Auftrag"
      items="{/ZAUFKSet}"
      showSecondaryValues="true"
      width="50%"
    >
      <core:ListItem text="{Aufnr}" />
    </ComboBox>
  </l:VerticalLayout>
  <Label
    text="Datum"
    class="font1"
  />
  <DatePicker id="DP3"
    valueFormat="dd.MM.yyyy"
    displayFormat="medium"
    width="50%"
    placeholder="dd.mm.yyyy"
  />
  <Label class="font1" text="Dauer" />
  <Input id="dauer"
    class="dauer"
    placeholder="Dauer eingeben ... "
    width="50%"
  />
  <HBox class="sapUiSmallMargin">
    <core:Icon
      src="sap-icon://sys-help"
      class="size1" color="#031E48" press="aseads"
    >
      <core:layoutData>
        <FlexItemData growFactor="1" />
      </core:layoutData>
    </core:Icon>
  </HBox>
  <!-- <Button icon="sap-icon://sys-help"  class="myButton"/> -->
  <Label class="font1" text="Arbeitsbeschreibung" />
  <TextArea id="beschreibung" width="50%" />
</form:SimpleForm>

Update:随着变化commit:8f1757d，自 UI5 1.84 起可用，值帮助图标可以通过更改valueHelpIconSrc:

<Input showValueHelp="true"
  valueHelpIconSrc="sap-icon://sys-help"
  valueHelpRequest="alert('Help requested')"
/><!-- valueHelpIconSrc available since 1.84.0 -->

无需延长sap.m.InputBase在这种情况下。其他输入控件如sap.m.MaskInput仍然需要扩展，如下面链接的 Plunk 所示。

原答案：

最好的解决方案就像Datum上面有一个小图标，我可以点击它。 （...） 是否可以？

是的，这是可能的。这里有一个最小的例子： https://embed.plnkr.co/EzlF2tkvalJWvSEn

For this, UI5 provides the API addEndIcon^api which is protected, meaning it should be used only when extending sap.m.InputBase!

As an argument for the addEndIcon, you can pass a map of settings that are required to create sap.ui.core.Icon^api, which is highly customizable.

const icon = this.addEndIcon({
  id: this.getId() + "-questionMarkBtn",
  src: IconPool.getIconURI("sys-help"),
  noTabStop: true,
  tooltip: "Information",
  press: [this.onEndButtonPress, this],
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..