HTMLElement.enterKeyHint — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.enterKeyHint

Beschreibung

Mit enterKeyHint geben Sie virtuellen Tastaturen (vor allem auf Smartphones und Tablets) einen Hinweis darauf, was beim Druck auf die Eingabetaste passiert. Die Tastatur passt daraufhin die Beschriftung oder das Symbol der Taste an, etwa „Senden“, „Suchen“, „Weiter“ oder einen Pfeil. Die Eigenschaft spiegelt das globale HTML-Attribut enterkeyhint und gilt für alle bearbeitbaren Elemente: <input>, <textarea> und Elemente mit contenteditable.

Erlaubt sind die folgenden Werte:

"enter": fügt typischerweise eine neue Zeile ein
"done": Eingabe beendet, die Tastatur kann sich schließen
"go": zum Ziel des eingegebenen Textes springen (z. B. zu einer URL)
"next": zum nächsten Eingabefeld wechseln
"previous": zum vorherigen Eingabefeld wechseln
"search": Suche ausführen
"send": Nachricht senden

Die Eigenschaft ist nur ein Hinweis zur Darstellung. Sie ändert nicht, was die Taste tatsächlich tut. Das zugehörige Verhalten (Formular absenden, Fokus weitergeben, Nachricht verschicken) müssen Sie selbst umsetzen, etwa über ein keydown-Ereignis oder das submit-Ereignis des Formulars. Ist kein Wert gesetzt, entscheidet der Browser anhand von Kontext, type und inputmode.

Parameter

Name	Typ	Default	Beschreibung
$value	"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send" \| ""	""	Neuer Wert beim Setzen. Wird als Attribut `enterkeyhint` übernommen. Ein leerer String bedeutet: Der Browser entscheidet.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle, bereinigte Wert als Kleinbuchstaben-String, z. B. "send". Fehlt das Attribut oder ist sein Wert ungültig, ist das Ergebnis "".

Beispiele

Wert lesen und setzen

const suche = document.createElement('input');
suche.type = 'text';
console.log(JSON.stringify(suche.enterKeyHint));

suche.enterKeyHint = 'search';
console.log(suche.enterKeyHint);
console.log(suche.getAttribute('enterkeyhint'));

document.body.append(suche);

"" search search

Mehrstufiges Formular: „Weiter“ und am Ende „Fertig“

// <form id="adresse"><input name="name"><input name="strasse"><input name="ort"></form>
const form = document.querySelector('#adresse');
const felder = [...form.querySelectorAll('input')];

felder.forEach((feld, i) => {
  const letztes = i === felder.length - 1;
  feld.enterKeyHint = letztes ? 'done' : 'next';

  // Das Verhalten selbst umsetzen: enterKeyHint ist nur die Beschriftung
  feld.addEventListener('keydown', (event) => {
    if (event.key !== 'Enter' || event.isComposing) return;
    event.preventDefault();
    if (letztes) {
      feld.blur(); // Tastatur schließen
      form.requestSubmit();
    } else {
      felder[i + 1].focus();
    }
  });
});

Chat-Eingabe mit contenteditable und „Senden“-Taste

const eingabe = document.createElement('div');
eingabe.contentEditable = 'true';
eingabe.enterKeyHint = 'send';
eingabe.setAttribute('role', 'textbox');
document.body.append(eingabe);

const senden = async (text) => {
  await fetch('/api/nachrichten', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text })
  });
};

eingabe.addEventListener('keydown', async (event) => {
  if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
    event.preventDefault();
    const text = eingabe.textContent.trim();
    if (text) {
      await senden(text);
      eingabe.textContent = '';
    }
  }
});

Ungültige Werte werden zu einem leeren String

const feld = document.createElement('textarea');
feld.enterKeyHint = 'SEND';
console.log(feld.enterKeyHint);

feld.enterKeyHint = 'abschicken';
console.log(JSON.stringify(feld.enterKeyHint));
console.log(feld.getAttribute('enterkeyhint'));

send "" abschicken

// Wichtig · Fallstricke

Nur ein Hinweis: Die Eigenschaft ändert lediglich Beschriftung oder Symbol der Taste. Das tatsächliche Verhalten müssen Sie selbst per keydown oder submit umsetzen. Wie die Taste am Ende aussieht, entscheidet die Tastatur. Manche Tastaturen von Drittanbietern ignorieren den Hinweis ganz, und auf Geräten mit echter Tastatur hat er keine Wirkung.
Ungültige Werte: Das Attribut behält den geschriebenen Text, die Eigenschaft liefert aber "". Groß- und Kleinschreibung spielt keine Rolle, gelesen wird immer in Kleinbuchstaben.
Nicht mit inputmode verwechseln: inputMode legt die Art der Tastatur fest (z. B. Ziffernblock), enterKeyHint nur die Eingabetaste. Beide lassen sich kombinieren.
IME-Eingabe: Bei Eingabemethoden für Chinesisch, Japanisch usw. bestätigt Enter oft nur die Zeichenauswahl. Prüfen Sie deshalb event.isComposing, bevor Sie eine Aktion auslösen.
Browser-Unterstützung: Chrome/Edge ab 77/79, Safari ab 13.1, Firefox ab 94. Ältere Browser ignorieren die Eigenschaft einfach. Deshalb eignet sie sich gut als progressive Verbesserung, ohne dass etwas kaputtgeht.

Siehe auch

HTMLElement.inputMode HTMLElement.contentEditable KeyboardEvent.isComposing HTMLFormElement.requestSubmit() HTMLInputElement HTMLElement.writingSuggestions