TextField

Die Text Field-Komponente ermöglicht es Benutzern, Text auf einer Seite einzugeben. Sie wird häufig in Formularen und Dialogen verwendet.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/text-field.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { TextField } from 'mdui/components/text-field.js';

Beispiel:

<mdui-text-field label="Textfeld"></mdui-text-field>

Mit dem Attribut helper legen Sie den Hilfetext unter dem Textfeld fest. Sie können den Hilfetext auch über den Slot helper festlegen. Fügen Sie helper-on-focus hinzu, um den Hilfetext nur anzuzeigen, wenn das Textfeld fokussiert ist.

Unterstützender Text

<mdui-text-field label="Textfeld" helper="Unterstützender Text"></mdui-text-field>

<mdui-text-field label="Textfeld">
  <span slot="helper" style="color: blue">Unterstützender Text</span>
</mdui-text-field>

<mdui-text-field label="Textfeld" helper="Unterstützender Text" helper-on-focus></mdui-text-field>

Quellcode

Löschbar

Wenn Sie das Attribut clearable hinzufügen, erscheint rechts neben dem Textfeld eine Schaltfläche zum Löschen, wenn das Textfeld einen Wert hat.

<mdui-text-field clearable label="Textfeld" value="Eingabetext"></mdui-text-field>

Quellcode

Text rechtsbündig ausrichten

Fügen Sie das Attribut end-aligned hinzu, um den Text rechtsbündig auszurichten.

<mdui-text-field end-aligned label="Textfeld" value="Eingabetext"></mdui-text-field>

Quellcode

Text und Symbole links/rechts

Über die Attribute icon und end-icon können Sie links bzw. rechts vom Textfeld ein Material Icons-Symbol hinzufügen. Sie können auch über die Slots icon und end-icon Elemente hinzufügen.

<mdui-text-field icon="search" end-icon="mic" label="Textfeld"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Textfeld">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Quellcode

Über die Attribute prefix und suffix können Sie links bzw. rechts vom Textfeld Text hinzufügen. Sie können auch über die Slots prefix und suffix Textelemente hinzufügen. Diese Texte werden nur angezeigt, wenn das Textfeld fokussiert ist oder einen Wert hat.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Textfeld"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Textfeld">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Quellcode

Nur-Lese-Modus

Fügen Sie das Attribut readonly hinzu, um das Textfeld in den Nur-Lese-Modus zu versetzen.

<mdui-text-field readonly label="Textfeld" value="Eingabetext"></mdui-text-field>

Quellcode

Deaktivierter Zustand

Fügen Sie das Attribut disabled hinzu, um das Textfeld zu deaktivieren.

<mdui-text-field disabled label="Textfeld" value="Eingabetext"></mdui-text-field>

Quellcode

Mehrzeiliges Textfeld

Verwenden Sie das Attribut rows, um die Anzahl der Zeilen eines mehrzeiligen Textfelds festzulegen.

<mdui-text-field rows="3" label="Textfeld"></mdui-text-field>

Quellcode

Sie können auch das Attribut autosize hinzufügen, damit sich die Höhe des Textfelds automatisch an die Länge des eingegebenen Texts anpasst. Mit den Attributen min-rows und max-rows können Sie die minimale und maximale Zeilenanzahl für die automatische Anpassung festlegen.

<mdui-text-field autosize label="Textfeld"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Textfeld"></mdui-text-field>

Quellcode

Zeichenzähler

Wenn Sie die maximale Zeichenanzahl über das Attribut maxlength festgelegt haben, können Sie das Attribut counter hinzufügen, um einen Zeichenzähler unter dem Textfeld anzuzeigen.

<mdui-text-field maxlength="20" counter label="Textfeld"></mdui-text-field>

Quellcode

Passwortfeld

Wenn type="password" gesetzt ist, fügen Sie das Attribut toggle-password hinzu, um rechts neben dem Textfeld eine Schaltfläche zum Umschalten der Passwortsichtbarkeit anzuzeigen.

<mdui-text-field type="password" toggle-password label="Textfeld"></mdui-text-field>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Definiert die Textfeld-Variante. Standard ist `filled`. Mögliche Werte: `filled`: Textfeld mit einer Hintergrundfarbe für stärkere visuelle Betonung. `outlined`: Textfeld mit einem Rahmen für dezentere visuelle Betonung.
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Gibt den Textfeld-Typ an. Standard ist `text`. Mögliche Werte: `text`: Standard-Textfeld. `number`: Ermöglicht nur numerische Eingabe. Virtuelle Tastaturen auf mobilen Geräten zeigen ein numerisches Layout an. `password`: Blendet das Passwort während der Eingabe aus. `url`: Validiert das URL-Format. Virtuelle Tastaturen auf mobilen Geräten zeigen ein URL-spezifisches Layout an. `email`: Validiert das E-Mail-Format. Virtuelle Tastaturen auf mobilen Geräten zeigen ein E-Mail-spezifisches Layout an. `search`: Zeigt ein Suchsymbol auf der Eingabetaste in virtuellen Tastaturen an. `tel`: Zeigt eine Telefontastatur auf virtuellen Tastaturen an. `hidden`: Blendet das Steuerelement aus, aber sein Wert wird dennoch an den Server gesendet. `date`: Öffnet einen Datumsauswähler oder ein numerisches Scrollrad für Jahr, Monat und Tag in unterstützten Browsern. `datetime-local`: Aktiviert einen Datums- und Uhrzeitauswähler in unterstützten Browsern, ohne Zeitzone. `month`: Ermöglicht die Eingabe eines Jahres und Monats ohne Zeitzone. `time`: Ermöglicht die Zeit Eingabe ohne Zeitzone. `week`: Ermöglicht die Eingabe eines Jahres und einer Kalenderwoche ohne Zeitzone.
`name`	`name`	`string`	`''`
Der Name des Textfelds, der mit Formulardaten übermittelt wird.
`value`	`value`	`string`	`''`
Der Wert des Textfelds, der mit Formulardaten übermittelt wird.
	`defaultValue`	`string`	`''`
Der Standardwert. Das Textfeld setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
`label`	`label`	`string`	-
Beschriftungstext.
`placeholder`	`placeholder`	`string`	-
Platzhaltertext.
`helper`	`helper`	`string`	-
Hilfetext am unteren Rand des Textfelds. Alternativ können Sie `slot="helper"` verwenden.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Blendet den Hilfetext nur ein, wenn das Textfeld fokussiert ist.
`clearable`	`clearable`	`boolean`	`false`
Macht das Textfeld löschbar.
`clear-icon`	`clearIcon`	`string`	-
Name des Material Icons rechts, wenn das Textfeld löschbar ist. Alternativ können Sie `slot="clear-icon"` verwenden.
`end-aligned`	`endAligned`	`boolean`	`false`
Richtet den Text rechtsbündig aus.
`prefix`	`prefix`	`string`	-
Präfix-Text des Textfelds. Er wird nur angezeigt, wenn das Textfeld fokussiert ist oder einen Wert hat. Alternativ können Sie `slot="prefix"` verwenden.
`suffix`	`suffix`	`string`	-
Suffix-Text des Textfelds. Er wird nur angezeigt, wenn das Textfeld fokussiert ist oder einen Wert hat. Alternativ können Sie `slot="suffix"` verwenden.
`icon`	`icon`	`string`	-
Name des Material Icons für das Präfix-Icon des Textfelds. Alternativ können Sie `slot="icon"` verwenden.
`end-icon`	`endIcon`	`string`	-
Name des Material Icons für das Suffix-Icon des Textfelds. Alternativ können Sie `slot="end-icon"` verwenden.
`error-icon`	`errorIcon`	`string`	-
Name des Material Icons, das bei fehlgeschlagener Formularfeldvalidierung rechts im Textfeld angezeigt wird. Alternativ können Sie `slot="error-icon"` verwenden.
`form`	`form`	`string`	-
Verknüpft das Textfeld mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet das Textfeld sein übergeordnetes `<form>`-Element, falls vorhanden. Dies ermöglicht es dem Textfeld, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem es verschachtelt ist.
`readonly`	`readonly`	`boolean`	`false`
Macht das Textfeld schreibgeschützt.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert das Textfeld.
`required`	`required`	`boolean`	`false`
Das Feld muss ausgefüllt werden, bevor das Formular gesendet wird.
`rows`	`rows`	`number`	-
Die Anzahl der Zeilen im Textfeld.
`autosize`	`autosize`	`boolean`	`false`
Passt die Höhe des Textfelds automatisch an seinen Inhalt an.
`min-rows`	`minRows`	`number`	-
Die minimale Anzahl von Zeilen, wenn `autosize` aktiviert ist.
`max-rows`	`maxRows`	`number`	-
Die maximale Anzahl von Zeilen, wenn `autosize` aktiviert ist.
`minlength`	`minlength`	`number`	-
Die minimale Anzahl von Zeichen für die Eingabe.
`maxlength`	`maxlength`	`number`	-
Die maximale Anzahl von Zeichen für die Eingabe.
`counter`	`counter`	`boolean`	`false`
Zeigt die Zeichenanzahl an, wenn `maxlength` angegeben ist.
`min`	`min`	`number`	-
Der Mindestwert, wenn `type` `number` ist.
`max`	`max`	`number`	-
Der Höchstwert, wenn `type` `number` ist.
`step`	`step`	`number`	-
Das Schrittintervall für Erhöhen/Verringern, wenn `type` `number` ist.
`pattern`	`pattern`	`string`	-
Der reguläre Ausdruck für die Formularvalidierung.
`toggle-password`	`togglePassword`	`boolean`	`false`
Fügt eine Umschaltfläche hinzu, um das Passwort anzuzeigen oder zu verbergen, wenn `type` `password` ist.
`show-password-icon`	`showPasswordIcon`	`string`	-
Name des Material Icons für die Umschaltfläche zum Anzeigen des Passworts. Alternativ können Sie `slot="show-password-icon"` verwenden.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Name des Material Icons für die Umschaltfläche zum Verbergen des Passworts. Alternativ können Sie `slot="hide-password-icon"` verwenden.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Ein nicht standardmäßiges iOS-Attribut für die automatische Großschreibung. Mögliche Werte: `none`: Deaktiviert die automatische Großschreibung. `sentences`: Schreibt den ersten Buchstaben jedes Satzes groß. `words`: Schreibt den ersten Buchstaben jedes Wortes groß. `characters`: Schreibt alle Buchstaben groß.
`autocorrect`	`autocorrect`	`string`	-
Das `autocorrect`-Attribut des `input`-Elements.
`autocomplete`	`autocomplete`	`string`	-
Das `autocomplete`-Attribut des `input`-Elements.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Passt den Text oder das Symbol der Eingabetaste auf der virtuellen Tastatur an. Die Wirkung variiert je nach Gerät und Sprache. Mögliche Werte: `enter`: Fügt eine neue Zeile ein, typischerweise in einem mehrzeiligen Textfeld verwendet. `done`: Zeigt Fertigstellung an und schließt die virtuelle Tastatur. `go`: Navigiert zum Ziel des eingegebenen Textes. `next`: Bewegt sich zum nächsten Textfeld. `previous`: Bewegt sich zum vorherigen Textfeld. `search`: Navigiert zu Suchergebnissen. `send`: Sendet eine Textnachricht.
`spellcheck`	`spellcheck`	`boolean`	`false`
Aktiviert die Rechtschreibprüfung.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Passt die virtuelle Tastatur an. Mögliche Werte: `none`: Keine virtuelle Tastatur. Ideal für benutzerdefinierte Eingabesteuerelemente. `text`: Standard-Tastatur für Texteingabe. `decimal`: Dezimal-Eingabetastatur. Diese enthält einen Punkt `.` oder Komma `,` und Zahlen. `numeric`: Numerische Tastatur. Diese zeigt die Zahlen 0–9 an. `tel`: Telefonnummern-Tastatur. Diese enthält die Zahlen 0–9, Stern `*` und Rautetaste `#`. `search`: Für die Suche optimierte virtuelle Tastatur. 'Suchen' erscheint auf der Schaltfläche 'Senden'. `email`: Für E-Mail optimierte virtuelle Tastatur. Diese enthält typischerweise `@` und `.`. `url`: Für URL optimierte virtuelle Tastatur. Diese enthält typischerweise `.`, `/` und `#`.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
	`valueAsNumber`	`number`	-
Ruft den Wert als `number` ab oder legt ihn fest. Gibt `NaN` zurück, wenn der Wert nicht konvertiert werden kann.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.

Methoden

Name	Parameter	Rückgabewert
`select`		`void`
Wählt den Inhalt des Textfelds aus.
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Wählt einen bestimmten Bereich im Textfeld aus.
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Ersetzt einen bestimmten Bereich im Textfeld durch neuen Text.
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn das Textfeld den Fokus erhält.
`blur`
Wird ausgelöst, wenn das Textfeld den Fokus verliert.
`change`
Wird ausgelöst, wenn sich der Wert ändert und das Textfeld den Fokus verliert.
`input`
Wird ausgelöst, wenn sich der Wert ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
`clear`
Wird ausgelöst, wenn der Löschen-Button angeklickt wird. Kann mit `event.preventDefault()` verhindert werden.

Slots

Name
`icon`
Icon auf der linken Seite.
`end-icon`
Icon auf der rechten Seite.
`error-icon`
Icon auf der rechten Seite bei Validierungsfehler.
`prefix`
Text auf der linken Seite.
`suffix`
Text auf der rechten Seite.
`clear-button`
Löschen-Button.
`clear-icon`
Icon im Löschen-Button.
`toggle-password-button`
Schaltfläche zum Umschalten der Passwortsichtbarkeit.
`show-password-icon`
Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort anzeigen').
`hide-password-icon`
Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort verbergen').
`helper`
Hilfetext, der unter dem Feld angezeigt wird.

CSS Parts

Name
`container`
Container für das Textfeld.
`icon`
Icon auf der linken Seite.
`end-icon`
Icon auf der rechten Seite.
`error-icon`
Icon auf der rechten Seite bei Validierungsfehler.
`prefix`
Text auf der linken Seite.
`suffix`
Text auf der rechten Seite.
`label`
Beschriftungstext über dem Feld.
`input`
Internes `<input>`- oder `<textarea>`-Element.
`clear-button`
Löschen-Button.
`clear-icon`
Icon im Löschen-Button.
`toggle-password-button`
Schaltfläche zum Umschalten der Passwortsichtbarkeit.
`show-password-icon`
Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort anzeigen').
`hide-password-icon`
Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort verbergen').
`supporting`
Container für unterstützenden Text am unteren Rand des Feldes, einschließlich Hilfetext, Fehlertext und Zähler.
`helper`
Hilfetext, der unter dem Feld angezeigt wird.
`error`
Text unten für Fehler.
`counter`
Zeichenanzahl in der unteren rechten Ecke.

Vorherige Seite

Tabs

Nächste Seite

Tooltip

TextField

Verwendung

Beispiele

Form

Hilfstext

Löschbar

Text rechtsbündig ausrichten

Text und Symbole links/rechts

Nur-Lese-Modus

Deaktivierter Zustand

Mehrzeiliges Textfeld

Zeichenzähler

Passwortfeld

API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts