Methoden und Steuerungen für Benutzereingaben

• Um Touchscreen-Anzeigen zu unterstützen, interpretieren Touch-Ereignisse Fingeraktivitäten auf Touch-basierten Benutzeroberflächen von mobilen Geräten, über Kühlschrank-Displays bis hin zu Museumskiosk-Anzeigen.
• Die Fullscreen API ermöglicht es Ihnen, Ihre Inhalte im Vollbildmodus anzuzeigen, was erforderlich ist, wenn Ihr Formular auf einem Kühlschrank oder Museumskiosk angezeigt wird.
• Wenn Sie ein benutzerdefiniertes Formularelement erstellen müssen, wie einen Rich-Text-Editor, ermöglicht das contentEditable Attribut die Erstellung von bearbeitbaren Steuerungen aus normalerweise nicht-editierbaren HTML-Elementen.
• Die Drag and Drop API ermöglicht es Benutzern, Elemente auf einer Seite zu ziehen und an verschiedenen Stellen abzulegen. Dies kann das Benutzererlebnis verbessern, wenn es darum geht, Dateien für den Upload auszuwählen oder Inhaltsmodule innerhalb einer Seite neu anzuordnen.
• Wenn Ihre Layouts von der Bildschirmausrichtung abhängen, können Sie CSS-Media-Queries verwenden, um Ihre Formulare basierend auf der Ausrichtung des Browsers zu gestalten, oder sogar die Screen Orientation API verwenden, um den Status der Bildschirmausrichtung zu lesen und andere Aktionen durchzuführen.

Die folgenden Abschnitte bieten eine Reihe von Empfehlungen und Best Practices, um die größtmögliche Anzahl von Benutzern zu befähigen, Ihre Websites und Anwendungen zu verwenden.

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 ein besseres Benutzererlebnis ist es wichtig, alle Formularelemente korrekt zu beschriften. Wenn jedes Formularelement mit einem korrekt zugeordneten <label> versehen ist, wird Ihr Formular für alle vollständig zugänglich sein, insbesondere für diejenigen, die Ihr Formular mit einer Tastatur, einem Screenreader und möglicherweise überhaupt keinem 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. Zum Beispiel, wenn Sie Steuerungen 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 Steuerlogik definieren, die ausgeführt werden soll, wenn die keydown und keyup Ereignisse ausgelöst werden.

Sie können auch Maus- und andere Zeigereignisse erfassen. Die Ereignisse, die auftreten, wenn der Benutzer mit einem Zeigegerät wie einer Maus interagiert, werden durch die MouseEvent DOM-Schnittstelle dargestellt. Häufige Mausereignisse umfassen click, dblclick, mouseup und mousedown. Die Liste aller Ereignisse, die die MouseEvent-Schnittstelle verwenden, ist in der Ereignisreferenz aufgeführt.

Wenn das Eingabegerät eine Maus ist, können Sie auch die Benutzereingabe über die Pointer Lock API steuern und Drag & Drop implementieren (siehe unten). Sie können auch CSS verwenden, um auf Unterstützung für Zeigereingabegeräte zu testen.

Um zusätzliche Unterstützung für Touchscreen-Geräte zu bieten, ist es eine gute Praxis, die unterschiedlichen Fähigkeiten in Bezug auf Bildschirmauflösung und Benutzereingabe 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, auf dem Sie die Touch-Ereignisse registrieren möchten.

Mäuse sind nicht die einzigen Zeigegeräte. Die Geräte Ihrer Benutzer können mehrere Eingabeformen integrieren, wie Maus, Fingerberührung und Stifteingabe. Jeder dieser Zeiger hat eine andere Größe. Die Pointer Events API kann nützlich sein, wenn Sie Ereignisse über Geräte hinweg verwalten müssen, indem sie die Handhabung jedes einzelnen normalisiert. Ein Zeiger kann jeder Kontaktpunkt auf dem Bildschirm sein, der von einem Mauszeiger, Stift, Berührung (einschließlich Mehrfachberührung) oder einem anderen Eingabegerät kommt.

Die Ereignisse zur Handhabung generischer Zeigereingaben sehen denen für die Maus sehr ähnlich: pointerdown, pointermove, pointerup, pointerover, pointerout, usw. Die PointerEvent Schnittstelle bietet alle Details, die Sie möglicherweise über das Zeigegerät erfassen möchten, einschließlich seiner Größe, seines Drucks und seines Winkels.

Wenn Sie leicht unterschiedliche Layouts benötigen, je nachdem ob der Benutzer sich im Hoch- oder Querformat befindet, können Sie CSS-Media-Queries verwenden, um CSS für unterschiedliche Layouts oder Breiten von Formularelementen basierend auf der Größe oder Ausrichtung des Bildschirms zu definieren, wenn Sie Webformulare gestalten.

Wenn die Bildschirmausrichtung für Ihr Formular wichtig ist, können Sie den Zustand der Bildschirmausrichtung lesen, informiert werden, wenn sich dieser Zustand ändert und die Bildschirmausrichtung auf einen bestimmten Zustand (normalerweise Hoch- oder Querformat) durch die Screen Orientation API sperren.

• Ausrichtungsdaten können über screenOrientation.type oder mit CSS durch das orientation Medienmerkmal abgerufen werden.
• Wenn sich die Bildschirmausrichtung ändert, wird das change Ereignis auf dem Bildschirmobjekt ausgelöst.
• Das Sperren der Bildschirmausrichtung wird durch Aufrufen der ScreenOrientation.lock() Methode ermöglicht.
• Die ScreenOrientation.unlock() Methode entfernt alle zuvor gesetzten Bildschirmsperren.

Wenn Sie Ihr Formular im Vollbildmodus präsentieren müssen, etwa wenn Ihr Formular auf einem Museumskiosk, einer Mautstelle oder wirklich jeder öffentlich angezeigten Benutzeroberfläche angezeigt wird, können Sie dies tun, indem Sie Element.requestFullscreen() auf dieses Element aufrufen:

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

Eine übliche Benutzerinteraktion ist das physische Ziehen von Elementen, die an anderer Stelle auf dem Bildschirm abgelegt werden sollen. Drag and Drop kann das Benutzererlebnis verbessern, wenn es darum geht, Dateien für den Upload auszuwählen oder Inhaltsmodule innerhalb einer Seite neu anzuordnen. Dafür gibt es eine API!

Die Drag & Drop API ermöglicht es Benutzern, die Maustaste über einem Element zu klicken und 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 Abschnitt von Inhalten zu ziehen.

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

in dem wir:

• Das draggable Attribut auf true setzen auf dem Element, das Sie verschiebbar machen möchten.
• Einen Listener für das dragstart Ereignis hinzufügen und die Ziehdaten innerhalb dieses Listeners festlegen.

Im Allgemeinen sollten Sie ein <textarea> oder einen geeigneten <input> Typ innerhalb eines <form> verwenden, um Daten von Benutzern zu sammeln, zusammen mit einem beschreibenden <label>. Aber diese Elemente erfüllen möglicherweise nicht Ihre Bedürfnisse. Zum Beispiel erfassen Rich-Text-Editoren kursiven, fetten und normalen Text, aber kein nativer Formularkontroll erlaubt es, Rich-Text zu erfassen. Dieses Anwendungsfall erfordert die Erstellung einer benutzerdefinierten Kontrolle, die stilbar und editierbar ist. Dafür gibt es ein Attribut!

Jedes DOM-Element kann direkt bearbeitbar gemacht werden durch das contenteditable Attribut.

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 der Standard-Tabsreihenfolge des Dokuments hinzu, das bedeutet, dass das tabindex Attribut nicht hinzugefügt werden muss. Wenn Sie jedoch nicht-semantische Elemente für die Dateneingabe verwenden, wenn Sie eigene Formularelemente erstellen, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit Formularkontrollfunktionalitäten auszustatten.

Um ein gutes Benutzererlebnis zu bieten, muss jede benutzerdefinierte Formularkontrolle, die Sie erstellen, zugänglich sein und wie native Formularelemente funktionieren:

• Die role des Elements, Beschriftung und Beschreibung müssen mit ARIA hinzugefügt werden.
• Alle Benutzereingabemethoden müssen unterstützt werden, einschließlich Tastatur, Maus, Berührung und Zeiger Ereignissen, die alle oben beschrieben sind.
• JavaScript ist erforderlich, um Funktionalitäten wie Validierung, Übermittlung, und Speichern von benutzeraktualisierten Inhalten zu handhaben.

• Touch Events Leitfaden
• Verwaltung der Bildschirmausrichtung
• Verwendung des Vollbildmodus
• Drag Operationen Leitfaden
• Formularvalidierung
• Versenden von Formularen durch JavaScript

• MouseEvent Schnittstelle
• KeyboardEvent Schnittstelle
• Touch Events API
• Pointer Lock API
• Bildschirmausrichtung API
• Vollbild API
• Drag & Drop API
• HTML contenteditable Attribut