Benutzereingabemethoden und Steuerungen

• Um Touchscreen-Displays zu unterstützen, interpretieren Touch-Ereignisse die Fingeraktivität auf Touch-basierten Benutzeroberflächen von mobilen Geräten bis zu Kühlschrank-Panels und Displays in Museumskiosken.
• Die Fullscreen API ermöglicht es Ihnen, Ihre Inhalte im Vollbildmodus anzuzeigen, was erforderlich ist, wenn Ihr Formular auf einem Kühlschrank oder Museumskiosk bereitgestellt wird.
• Wenn Sie ein benutzerdefiniertes Formularelement erstellen müssen, wie z. B. einen Rich-Text-Editor, ermöglicht das contentEditable-Attribut das Erstellen von bearbeitbaren Steuerungen aus normalerweise nicht bearbeitbaren HTML-Elementen.
• Die Drag and Drop API ermöglicht es Benutzern, Elemente auf einer Seite zu ziehen und sie an verschiedenen Orten abzulegen. Dies kann die Benutzererfahrung verbessern, wenn es darum geht, Dateien für den Upload auszuwählen oder Inhaltsmodule innerhalb einer Seite neu zu ordnen.
• Wenn die Bildschirmorientierung für Ihr Layout wichtig ist, können Sie CSS-Media-Queries verwenden, um Ihre Formulare basierend auf der Ausrichtung des Browsers zu gestalten, oder sogar die Screen Orientation API nutzen, um den Bildschirmorientierungsstatus zu lesen und andere Aktionen durchzuführen.

Die folgenden Abschnitte bieten eine Reihe von Empfehlungen und bewährten Verfahren, um den breitesten möglichen Benutzerkreis auf Ihren Websites und Anwendungen zu unterstützen.

Die meisten Benutzer werden eine Tastatur verwenden, um Daten in Ihre Formularelemente einzugeben. Einige werden auch die Tastatur verwenden, um zu diesen Formularelementen zu navigieren. Um zugänglich zu sein und für eine bessere Benutzererfahrung, ist es wichtig, alle Formularelemente richtig zu beschriften. Wenn jedes Formularelement korrekt mit einem <label> verbunden ist, wird Ihr Formular vollständig zugänglich für alle, insbesondere für diejenigen, die Ihr Formular mit einer Tastatur, einem Bildschirmlesegerät und möglicherweise ohne Bildschirm navigieren.

Wenn Sie zusätzliche Tastaturunterstützung hinzufügen möchten, wie z.B. die Validierung eines Formularelements, wenn eine bestimmte Taste gedrückt wird, können Sie Ereignislistener verwenden, um Tastaturereignisse zu erfassen und darauf zu reagieren. Wenn Sie beispielsweise Steuerelemente hinzufügen möchten, wenn eine beliebige Taste gedrückt wird, müssen Sie einen Ereignislistener für das Fensterobjekt hinzufügen:

window.addEventListener("keydown", handleKeyDown, true);
window.addEventListener("keyup", handleKeyUp, true);

handleKeyDown und handleKeyUp sind Funktionen, die die Steuervorschriften definieren, die ausgeführt werden sollen, wenn die keydown- und keyup-Ereignisse ausgelöst werden.

Sie können auch Mauseingaben und andere Zeigerereignisse erfassen. Die über ein Zeigegerät wie eine Maus interagierenden Ereignisse werden durch das MouseEvent-DOM-Interface dargestellt. Häufige Mausereignisse sind click, dblclick, mouseup und mousedown. Die Liste aller mit dem Mausereignis-Interface verwendeten Ereignisse finden Sie in der Ereignisreferenz.

Wenn das Eingabegerät eine Maus ist, können Sie auch die Benutzereingaben durch die Pointer Lock API steuern und Drag & Drop implementieren (siehe unten). Sie können auch CSS verwenden, um Zeigegeräte zu testen.

Um zusätzliche Unterstützung für Touchscreen-Geräte bereitzustellen, ist es ratsam, die unterschiedlichen Fähigkeiten in Bezug auf Bildschirmauflösung und Benutzereingaben zu berücksichtigen. Touch-Ereignisse können Ihnen helfen, interaktive Elemente und gängige Interaktionsgesten auf Touchscreen-Geräten zu implementieren.

Wenn Sie Touch-Ereignisse verwenden möchten, müssen Sie Ereignislistener hinzufügen und Handlerfunktionen angeben, die aufgerufen werden, wenn das Ereignis ausgelöst wird:

element.addEventListener("touchstart", handleStart, false);
element.addEventListener("touchcancel", handleCancel, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchmove", handleMove, false);

wobei element das DOM-Element ist, für das Sie die Touch-Ereignisse registrieren möchten.

Mäuse sind nicht die einzigen Zeigegeräte. Die Geräte Ihrer Benutzer können mehrere Eingabeformen haben, wie Maus, Fingertipp und Stifteingabe. Jeder dieser Zeiger hat eine andere Größe. Die Pointer Events API kann hilfreich sein, wenn Sie Ereignisse über Geräte hinweg verwalten möchten, indem Sie die Handhabung jedes einzelnen normalisieren. Ein Zeiger kann jeder Kontaktpunkt auf dem Bildschirm sein, der durch einen Mauszeiger, Stift, Touch (einschließlich Multi-Touch) oder ein anderes Zeigereingabegerät erstellt wird.

Die Ereignisse zur Handhabung generischer Zeigereingaben sehen den Mausereignissen sehr ähnlich: pointerdown, pointermove, pointerup, pointerover, pointerout usw. Das PointerEvent-Interface bietet alle Details, die Sie möglicherweise über das Zeigereingabegerät erfassen möchten, einschließlich seiner Größe, Druck und Winkel.

Wenn Sie leicht unterschiedliche Layouts benötigen, je nachdem, ob der Benutzer im Hoch- oder Querformat ist, können Sie CSS-Media-Queries verwenden, um CSS für unterschiedliche Layouts oder Formularelementweiten basierend auf der Größe oder Orientierung des Bildschirms beim Styling von Webformularen zu definieren.

Wenn die Bildschirmorientierung für Ihr Formular wichtig ist, können Sie den Bildschirmorientierungsstatus lesen, informiert werden, wenn sich dieser Status ändert und in der Lage sein, die Bildschirmorientierung auf einen bestimmten Status (meistens Hoch- oder Querformat) durch die Screen Orientation API zu sperren.

• Orientierungsdaten können über screenOrientation.type oder mit CSS über das orientation-Media-Feature abgerufen werden.
• Wenn sich die Bildschirmorientierung ändert, wird das change-Ereignis auf dem Bildschirmobjekt ausgelöst.
• Das Sperren der Bildschirmorientierung ist möglich, indem die ScreenOrientation.lock()-Methode aufgerufen wird.
• Die ScreenOrientation.unlock()-Methode entfernt alle zuvor gesetzten Bildschirmsperren.

Wenn Sie Ihr Formular im Vollbildmodus präsentieren müssen, beispielsweise wenn Ihr Formular auf einem Museumskiosk, einer Mautstation oder wirklich jeder öffentlich angezeigten Benutzeroberfläche angezeigt wird, ist es möglich, dies zu tun, indem Sie Element.requestFullscreen() auf diesem Element aufrufen:

const elem = document.getElementById("myForm");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

Eine häufige Benutzerinteraktion ist das physische Ziehen von Elementen, um sie woanders auf dem Bildschirm abzulegen. Drag and Drop kann die Benutzererfahrung verbessern, wenn es darum geht, Dateien für Uploads auszuwählen oder Inhaltsmodule innerhalb einer Seite neu zu ordnen. Dafür gibt es eine API!

Die Drag & Drop-API ermöglicht es Benutzern, ein Element zu klicken und die Maustaste gedrückt zu halten, es an einen anderen Ort zu ziehen und die Maustaste loszulassen, um das Element dort abzulegen.

Hier ist ein Beispiel, das es ermöglicht, einen Inhaltsteil zu ziehen.

<div
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</div>

wobei wir:

• Das draggable-Attribut auf true setzen, um das Element, das ziehbar sein soll, zu definieren.
• Einen Listener für das dragstart-Ereignis hinzufügen und die Ziehdaten innerhalb dieses Listeners setzen.

Im Allgemeinen sollten Sie ein <textarea> oder einen geeigneten <input> Typ innerhalb eines <form> verwenden, um Daten von Benutzer zu erfassen, zusammen mit einem beschreibenden <label>. Diese Elemente erfüllen jedoch möglicherweise nicht Ihre Bedürfnisse. Beispielsweise erfassen Rich-Text-Editoren kursiven, fetten und normalen Text, aber kein natives Formularelement erfasst Rich-Text. Dieser Anwendungsfall erfordert, dass Sie ein benutzerdefiniertes Steuerelement erstellen, das sowohl stilisierbar als auch bearbeitbar ist. Dafür gibt es ein Attribut!

Jedes DOM-Element kann direkt bearbeitbar gemacht werden, indem das contenteditable-Attribut verwendet wird.

div {
  width: 300px;
  height: 130px;
  border: 1px solid gray;
}

<div contenteditable="true">This text can be edited by the user.</div>

Das contenteditable-Attribut fügt das Element automatisch in die Standard-Tabbing-Reihenfolge des Dokuments ein, was bedeutet, dass das tabindex-Attribut nicht hinzugefügt werden muss. Wenn Sie jedoch nicht-semantische Elemente zur Dateneingabe verwenden, wenn Sie Ihre eigenen Formularelemente erstellen, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit Formularelementfunktionen für alles andere nachzurüsten.

Um eine gute Benutzererfahrung zu gewährleisten, muss jedes benutzerdefinierte Formularelement, das Sie erstellen, zugänglich sein und wie native Formularelemente funktionieren:

• Die role, label und description des Elements müssen mit ARIA hinzugefügt werden.
• Alle Benutzereingabemethoden müssen unterstützt werden, einschließlich Tastatur, Maus, Touch und Zeiger Ereignisse, die alle oben beschrieben wurden.
• JavaScript ist erforderlich, um Funktionen wie Validierung, Übermittlung und Speichern von benutzeraktualisierten Inhalten zu handhaben.

• Touch-Ereignisse-Leitfaden
• Verwaltung der Bildschirmorientierung
• Verwendung des Vollbildmodus
• Drag-Operationen-Leitfaden
• Formularvalidierung
• Formulare per JavaScript senden

• MouseEvent Interface
• KeyboardEvent Interface
• Touch-Ereignisse API
• Pointer Lock API
• Screen Orientation API
• Fullscreen API
• Drag & Drop API
• HTML contenteditable Attribut