HTMLElement.inputMode — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.inputMode

Beschreibung

Die Eigenschaft inputMode spiegelt das HTML-Attribut inputmode wider. Damit teilt ein Element dem Browser mit, welche Art von Daten eingegeben werden soll. Auf Geräten mit virtueller Tastatur (Smartphones, Tablets) passt der Browser das Tastaturlayout daran an, etwa mit einem Ziffernblock, einer Tastatur mit @-Taste oder einer Suchtaste.

Anders als das Attribut type bei <input> hat inputMode keinen Einfluss auf die Prüfung oder Verarbeitung des Werts. Es ist nur ein Hinweis für die Tastatur. Deshalb eignet es sich gut für Felder, die zwar Ziffern enthalten, aber keine Zahlen im mathematischen Sinn sind, zum Beispiel PINs, Postleitzahlen oder Kreditkartennummern. Bei diesen Feldern wäre type="number" ungünstig, weil es Pfeile zum Hoch- und Runterzählen anzeigt, führende Nullen entfernt und e als Eingabe erlaubt.

Die Eigenschaft funktioniert bei jedem HTMLElement, also auch bei Elementen mit contenteditable. Gültige Werte sind:

"none": keine virtuelle Tastatur, z. B. wenn die Seite eine eigene Eingabeoberfläche mitbringt
"text": Standardtastatur des Gebietsschemas
"decimal": Ziffern mit Dezimaltrennzeichen
"numeric": nur Ziffern
"tel": Telefon-Tastenfeld mit * und #
"search": Tastatur, deren Eingabetaste für die Suche optimiert ist
"email": Tastatur mit @ und .
"url": Tastatur mit / und .

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen einer der Werte `"none"`, `"text"`, `"decimal"`, `"numeric"`, `"tel"`, `"search"`, `"email"` oder `"url"`. Das Setzen ändert das Attribut `inputmode` direkt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs inputmode. Ist das Attribut nicht gesetzt, wird ein leerer String "" zurückgegeben. Ungültige Werte werden unverändert zurückgegeben, der Browser ignoriert sie aber.

Beispiele

PIN-Feld mit Ziffernblock

const pin = document.createElement('input');
pin.type = 'text';          // kein type="number": führende Nullen bleiben erhalten
pin.inputMode = 'numeric';  // Ziffernblock auf Mobilgeräten
pin.pattern = '[0-9]{4,6}';
pin.autocomplete = 'one-time-code';
document.body.append(pin);

console.log(pin.inputMode);
console.log(pin.getAttribute('inputmode'));

numeric numeric

Wert auslesen und Standardfall erkennen

const field = document.querySelector('#betrag') ?? document.createElement('input');

// Leerer String bedeutet: Attribut nicht gesetzt
if (field.inputMode === '') {
  field.inputMode = 'decimal';
}
console.log(`Tastaturmodus: ${field.inputMode}`);

Tastaturmodus: decimal

Virtuelle Tastatur bei eigener Bildschirmtastatur unterdrücken

const display = document.createElement('div');
display.contentEditable = 'true';
display.inputMode = 'none'; // System-Tastatur nicht anzeigen
document.body.append(display);

// Eigene Tasten fügen Ziffern ein
const addDigit = (digit) => {
  display.textContent += digit;
};
['1', '2', '3'].forEach(addDigit);
console.log(display.textContent, display.inputMode);

123 none

Modus je nach Feldtyp dynamisch umschalten

const contact = document.createElement('input');
const modes = { email: 'email', telefon: 'tel', web: 'url' };

const setContactType = (kind) => {
  contact.inputMode = modes[kind] ?? 'text';
  contact.placeholder = `Bitte ${kind} eingeben`;
};

setContactType('telefon');
console.log(contact.inputMode);

tel

// Wichtig · Fallstricke

Keine Validierung: inputMode ändert nur die Tastatur. Nutzer können trotzdem beliebige Zeichen einfügen, z. B. über die Zwischenablage oder eine Hardware-Tastatur. Prüfen Sie Eingaben deshalb zusätzlich mit pattern, type oder eigener Logik und immer auch auf dem Server.
Desktop-Browser: Ohne virtuelle Tastatur hat die Eigenschaft meist keine sichtbare Wirkung.
Vorrang von type: Bei <input type="email">, type="tel" usw. wählt der Browser schon eine passende Tastatur. inputMode braucht man vor allem bei type="text" und bei contenteditable.
Kein Ersatz für enterkeyhint: Die Beschriftung der Eingabetaste (z. B. „Senden“ oder „Weiter“) wird über enterKeyHint gesteuert.
Ungültige Werte: Der Browser ignoriert sie und nutzt die Standardtastatur. Der Getter gibt trotzdem den gesetzten String zurück, die Eigenschaft ist also nicht auf gültige Werte beschränkt.
Kompatibilität: Unterstützt in Chrome/Edge 66+, Safari/iOS 12.2+ und Firefox 95+. Ältere Browser ignorieren die Eigenschaft ohne Fehlermeldung.
Barrierefreiheit: "none" nur verwenden, wenn wirklich eine eigene, zugängliche Eingabemöglichkeit bereitsteht.

Siehe auch

HTMLElement.inert HTMLElement.innerText HTMLElement.nonce HTMLElement.popover HTMLElement.style