enterkeyhint

Ich habe erst kürzlich erfahren, dass das Attribut enterkeyhint für Formular-Inputs existiert! Das scheint für mich ziemlich wichtig zu sein, da die Erstellung von HTML-Formular-Markup einen beträchtlichen Teil des Lebens eines Front-End-Entwicklers ausmacht, und dieses Attribut auf nahezu jedem Input verwendet werden könnte (sollte?).

Das Attribut enterkeyhint ändert die Aktionstaste auf einer mobilen Tastatur, um den Text/das Affordance zu ändern. Stefan Judis erklärt es gut in diesem Tweet aus dem Jahr 2020

https://twitter.com/stefanjudis/status/1249958064041734144

Nehmen wir an, ich habe ein Formular wie dieses

<form>
  <label>
    Name:
    <input type="text" name="name">
  </label>
  <label>
    Favorite songs:
    <textarea name="songs"></textarea>
  </label>
  <button>Save</button>
</form>

Die Benutzererfahrung suggeriert hier ein Formular, das „speichert“, aber standardmäßig auf dem iPhone in meiner Hand steht auf dem blauen Knopf der Tastatur… „go.“

Das ist keine Katastrophe oder so, aber jetzt habe ich Optionen für diesen Knopf. Ich werde mir diese aus dem Standard stehlen, der sie als „Input-Modalitäten“ bezeichnet

Keyword	Beschreibung
enter	Der User-Agent sollte einen Hinweis für die Operation ‚enter‘ anzeigen, typischerweise das Einfügen einer neuen Zeile.
done	Der User-Agent sollte einen Hinweis für die Operation ‚done‘ anzeigen, was typischerweise bedeutet, dass keine weitere Eingabe erforderlich ist und der Eingabemethoden-Editor (IME) geschlossen wird.
go	Der User-Agent sollte einen Hinweis für die Operation ‚go‘ anzeigen, was typischerweise bedeutet, dass der Benutzer zu dem Ziel des eingegebenen Textes gelangt.
next	Der User-Agent sollte einen Hinweis für die Operation ‚next‘ anzeigen, was typischerweise den Benutzer zum nächsten Feld führt, das Text akzeptiert.
previous	Der User-Agent sollte einen Hinweis für die Operation ‚previous‘ anzeigen, was typischerweise den Benutzer zum vorherigen Feld führt, das Text akzeptiert.
search	Der User-Agent sollte einen Hinweis für die Operation ‚search‘ anzeigen, was typischerweise den Benutzer zu den Ergebnissen der Suche nach dem eingegebenen Text führt.
send	Der User-Agent sollte einen Hinweis für die Operation ‚send‘ anzeigen, was typischerweise bedeutet, dass der Text an sein Ziel gesendet wird.

Als seriöser Web-Profi habe ich auch enterkeykint="poop" ausprobiert, aber leider wurde dies vom Browser nicht beachtet. Beachten Sie, dass auf Android der Aktionsknopf nicht nur immer zu Text wird, sondern Symbole verwendet. Für den Wert send erhalten Sie also ein kleines Papierfliegersymbol anstelle der Beschriftung „send“. Also ja, offensichtlich hätte poop zu 💩 werden sollen.

Für das kleine Formularbeispiel oben… der Wert enter oder done fühlt sich für mich irgendwie besser an als go. Wenn ich das ändern möchte, würde ich das Attribut für alle interaktiven Formularelemente hinzufügen

<form>
  <label>
    Name:
    <input type="text" name="name" enterkeyhint="done">
  </label>
  <label>
    Favorite songs:
    <textarea name="songs" enterkeyhint="done"></textarea>
  </label>
  <button enterkeyhint="done">Save</button>
</form>

Dieses Attribut wird direkt auf den Formular-Inputs platziert, daher fühlt es sich etwas repetitiv an, es für jeden einzelnen Input zu schreiben, besonders bei längeren Formularen. Aber es gibt Ihnen die Möglichkeit, es zu ändern, je nachdem, welcher Input gerade fokussiert ist.

Ich stelle fest, dass save keine gültige Option ist. Das erscheint seltsam, da es sich so anfühlt, als ob viele Formulare dies anbieten würden. Vielleicht möchte die Webplattform nichts anbieten, das den Benutzern etwas sagt, das sie nicht durchsetzen können? Ich bin mir da aber nicht sicher, denn wenn Sie next oder previous eingeben, ändert sich das Verhalten überhaupt nicht – Sie müssten das selbst programmieren, wenn Sie den Fokus zum nächsten oder vorherigen Input verschieben möchten. Standardmäßig sendet der Aktionsknopf einfach das Formular wie gewohnt.

Ich bin auf all das gestoßen, als Stefan kürzlich tweetete, dass Firefox es jetzt unterstützt und eine weitgehend vollständige Unterstützung für diese Funktion bietet. Diese Funktion ist nur für mobile Browser relevant (oder, nehme ich an, für Browser, die virtuelle Tastaturen unterstützen?), was mich an Firefox Mobile denken ließ. Ich bin es so gewohnt, dass auf iOS alle Browser Safari sind (🤬). Aber unter Android kann man „echtes“ Firefox nutzen, was eine gute Erinnerung daran ist, dass es nicht nur unterschiedliche mobile Browser gibt, sondern dass unterschiedliche mobile Browser auch unterschiedliches Verhalten aufweisen.

In diesem Video, das meiner Meinung nach vor der Unterstützung für enterkeyhint liegt, beachten Sie, wie die virtuelle Tastatur automatisch eine Benutzeroberfläche für „next“ anbietet, wenn der erste Input fokussiert ist (und keine Möglichkeit zur direkten Absendung), aber beim zweiten (und letzten) Input wird der Aktionsknopf zu einem Absende-Knopf (und es gibt keinen „previous“-Knopf). Dies unterscheidet sich deutlich von iOS, wo nur Navigation zwischen den Inputs mit kleinen Auf- und Ab-Pfeilen angeboten wird, die sich oberhalb der Tastatur selbst befinden.

Alles in allem eine ziemlich coole Funktion, der wir uns zumindest bewusst sein sollten, wenn nicht sogar auf den meisten HTML-Formularen, die wir erstellen, verwenden, um die Verhaltensweisen anzupassen.