TextBox | X4Documentation

Mit <TextBox>-Controls können Sie Benutzern einer Web App die Möglichkeit geben, mit Text, Zahlen oder Datumsangaben zu arbeiten. Je nach Typ der TextBox ändert sich ihr Aussehen und Verhalten.

Hinweise zur Verwendung

Ein <TextBox>-Control wird mit dem Element <TextBox> erzeugt.

<TextBox>
...
</TextBox>

<TextBox>-Controls können in allen verfügbaren Layouttypen verwendet werden. Weitere Informationen finden Sie unter Layouts.

Attribute

Hinweis:

Es gibt eine Reihe von Standardattributen, die für alle Controls festgelegt werden können. Weitere Informationen zu den Standardattributen finden Sie unter Standardattribute.

Zusätzlich zu den Standardattributen können Sie die folgenden Attribute für <TextBox>-Controls definieren.

Attribut	Beschreibung
`autocomplete`	Dieses HTML-Attribut legt fest, ob die Autovervollständigung für die TextBox ein- oder ausgeschaltet ist. In der Standardeinstellung ist die Autovervollständigung aktiviert. Mögliche Werte: `true`/`false`
`border`	Legt fest, ob um das Control ein Rahmen angezeigt wird. Funktioniert nur, wenn `multiline="true"`. Mögliche Werte: `true`/`false`
`border-left`	Legt fest, ob ein linker Rand angezeigt wird. Funktioniert nur, wenn `multiline="true"`. Mögliche Werte: `true`/`false`
`border-right`	Legt fest, ob ein rechter Rand angezeigt wird. Funktioniert nur, wenn `multiline="true"`. Mögliche Werte: `true`/`false`
`border-top`	Legt fest, ob ein oberer Rand angezeigt wird. Funktioniert nur, wenn `multiline="true"`. Mögliche Werte: `true`/`false`
`border-bottom`	Legt fest, ob ein unterer Rand angezeigt wird. Funktioniert nur, wenn `multiline="true"`. Mögliche Werte: `true`/`false`
`displayName`	Beschriftung der TextBox. Data Binding möglich Mögliche Werte: Beliebige Zeichenkette
`iconColor`	Definiert die Farbe des Icons. Data Binding (Color) möglich Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Hinweis: Verwenden Sie keine Raute vor dem Farbwert. Verwenden Sie keine verkürzte Schreibweise des Farbwerts. Farbcode aus der Farbpalette der Web App, z. B. `A200` Weitere Informationen finden Sie unter Theming.
`iconPosition`	Position des Icons innerhalb der TextBox. Mögliche Werte: `prefix`: Icon wird zu Beginn der TextBox angezeigt (Standard). `suffix`: Icon wird am Ende der TextBox angezeigt.
`iconUrl`	Pfad zu einer Grafikdatei oder Angabe eines Material Icons, der als Icon verwendet wird. Data Binding möglich Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Das Material Icon muss mit dem Präfix `icon` angegeben werden, z. B. `icon:<MaterialIconName>`. Mögliche Werte: Zeichenkette (URI), z. B. `clock.png` `icon:<MaterialIconName>`, z. B. `icon:extension` Mit Strg+Leertaste erhalten Sie eine Übersicht der verfügbaren Icons. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen.
`multiline`	Legt fest, ob in der TextBox mehrzeilige Ein-/Ausgaben möglich sind. Funktioniert nur beim Typ `text`. Mögliche Werte: `true`/`false`
`rows`	Legt die sichtbare Höhe des Textfeldes fest. Funktioniert nur bei mehrzeiligen Textfeldern. Es können mehr Zeilen eingegeben werden, diese sind dann über Scrollen sichtbar. Mögliche Werte: Ganze Zahlen (Standard: `5`)
`type`	Typ der TextBox, ändert Verhalten und Aussehen. Mögliche Werte: `email`: E-Mail-Adresse `month`: Monat und Jahr mit Datepicker `number`: Zahl mit Wählpfeilen (Spinner) `search`: Suchfeld `tel`: Telefonnummer `text`: Text (Standard) `time`: Zeit mit Wählpfeilen (Spinner) `url`: URL `week`: Kalenderwoche und Jahr mit Datepicker und Wählpfeilen (Spinner) Alle Werte, die ein Datum oder eine Uhrzeit enthalten, müssen in UTC gespeichert und bereitgestellt werden!
`value`	Erforderlich Inhalt der TextBox. Übersetzbar Data Binding möglich Mögliche Werte: Beliebige Zeichenkette

Actions

Für <TextBox>-Controls steht Ihnen folgende Action zur Verfügung. Weitere Informationen zu Actions finden Sie unter Actions.

`<SelectAction>`

Sie können die Action Select über das Element <SelectAction/> innerhalb von <TextBox> einfügen. Die Action wird ausgelöst, sobald der Benutzer die TextBox auswählt.

Hinweis:

Sie müssen das Element <SelectAction> vor dem gewünschten Layouttyp (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout) einfügen.

Beispiel

TextBox in der Detail Component

XML

<DetailComponent xmlns="http://softproject.de/webapp/1.0" name="PasswordBox">
    <FlowLayout>
        <PasswordBox value="My password" displayToggle="true" displayName="Enter your password"/>
        <PasswordBox value="My password" displayToggle="true" displayName="Confirm your password"/>
        <RichText value="">
            <PDFExport/>
        </RichText>
        <TextBox value="demo.user@softproject.com" displayName="Email address" type="email" iconUrl="icon:email"/>
        <TextBox value="demo.user" autocomplete="true" displayName="Username" iconUrl="icon:person"/>
        <TextBox value="123456" displayName="Phone number" type="tel" iconUrl="icon:phone"/>
        <TextBox value="Text" displayName="Text input" type="text" iconUrl="icon:text_fields"/>
    </FlowLayout>
</DetailComponent>