Methoden und Steuerungen zur Benutzereingabe

Abgedeckte Themen

• Um Touchscreens zu unterstützen, interpretieren Touch-Events Fingeraktivitäten auf touchbasierten Benutzeroberflächen, von mobilen Geräten über Kühlschrankpanels bis hin zu Displays an Museumskiosks.
• Die Fullscreen API ermöglicht es, Inhalte im Vollbildmodus anzuzeigen, was erforderlich ist, wenn Ihr Formular auf einem Kühlschrank oder an einem Museumskiosk bereitgestellt wird.
• Wenn Sie ein benutzerdefiniertes Formularsteuerelement erstellen müssen, wie zum Beispiel einen Rich-Text-Editor, ermöglicht das contentEditable-Attribut die Erstellung von bearbeitbaren Steuerelementen aus normalerweise nicht bearbeitbaren HTML-Elementen.
• Die Drag and Drop API ermöglicht es Nutzern, Elemente auf einer Seite zu ziehen und an verschiedenen Stellen abzulegen. Dies kann das Benutzererlebnis beim Auswählen von Dateien zum Hochladen oder beim Umordnen von Inhaltsmodulen innerhalb einer Seite verbessern.
• Wenn die Bildschirmausrichtung für Ihr Layout von Bedeutung ist, können Sie CSS media queries verwenden, um Ihre Formulare basierend auf der Browserausrichtung zu stylen oder sogar die Screen Orientation API verwenden, um den Zustand der Bildschirmausrichtung zu lesen und andere Aktionen auszuführen.

Die folgenden Abschnitte bieten eine Reihe von Empfehlungen und Best Practices, um die größte mögliche Benutzeranzahl auf Ihren Websites und Anwendungen zu unterstützen.

Unterstützung allgemeiner Eingabemechanismen

Tastatur

Die meisten Nutzer werden eine Tastatur verwenden, um Daten in Ihre Formularsteuerelemente einzugeben. Einige werden auch die Tastatur verwenden, um zu diesen Formularsteuerelementen zu navigieren. Um zugänglich zu sein und eine bessere Benutzererfahrung zu bieten, ist es wichtig, alle Formularsteuerelemente korrekt zu beschriften. Wenn jedes Formularsteuerelement korrekt mit einem <label> verknüpft ist, wird Ihr Formular für alle voll zugänglich sein, insbesondere für alle, die Ihr Formular mit einer Tastatur, einem Screenreader oder möglicherweise ganz ohne Bildschirm navigieren.

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

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

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

Maus

Sie können auch Maus- und andere Zeigegeräteereignisse erfassen. Die Ereignisse, die auftreten, wenn der Benutzer mit einem Zeigegerät wie einer Maus interagiert, werden durch die MouseEvent DOM-Schnittstelle dargestellt. Zu den gängigen Mausereignissen gehören click, dblclick, mouseup und mousedown. Eine Liste aller Ereignisse, die die Mausereignisschnittstelle verwenden, finden Sie im DOM Events Leitfaden.

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 die Unterstützung von Zeigegeräten zu testen.

Finger-Touch

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-Events können Ihnen helfen, interaktive Elemente und allgemeine Interaktionsgesten auf Touchscreen-Geräten zu implementieren.

Wenn Sie Touch-Events 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);
element.addEventListener("touchcancel", handleCancel);
element.addEventListener("touchend", handleEnd);
element.addEventListener("touchmove", handleMove);

wobei element das DOM-Element ist, auf dem Sie die Touch-Events registrieren möchten.

Zeigerereignisse

Mäuse sind nicht die einzigen Zeigegeräte. Die Geräte Ihrer Benutzer können mehrere Eingabeformen enthalten, wie Maus, Finger-Touch und Stifteingaben. Jeder dieser Zeigegeräte hat eine andere Größe. Die Pointer Events API kann Ihnen helfen, wenn Sie Ereignisse über Geräte hinweg verwalten müssen, indem Sie die Handhabung jedes einzelnen normalisieren. Ein Zeiger kann jeder Berührungspunkt auf dem Bildschirm sein, der durch einen Mauscursor, einen Stift, eine Touch-Eingabe (einschließlich Multi-Touch) oder ein anderes Zeigereingabegerät erzeugt wurde.

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

Steuerungen implementieren

Bildschirmausrichtung

Wenn Sie leicht unterschiedliche Layouts benötigen, abhängig davon, ob der Benutzer im Hoch- oder Querformat ist, können Sie CSS Media Queries verwenden, um CSS für verschiedene Layouts oder Breiten von Formularsteuerelementen basierend auf der Bildschirmgröße oder -ausrichtung zu definieren, wenn Sie Webformulare stylen.

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

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

Vollbild

Wenn Sie Ihr Formular im Vollbildmodus präsentieren müssen, wie zum Beispiel, wenn Ihr Formular an 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();
}

Drag & Drop

Ein gängiges Benutzerinteraktionsschema ist das physische Ziehen von Elementen, die woanders auf dem Bildschirm abgelegt werden sollen. Drag-and-Drop kann das Nutzererlebnis verbessern, wenn es darum geht, Dateien zum Hochladen auszuwählen oder Inhaltsmodule innerhalb einer Seite neu zu ordnen. Dafür gibt es eine API!

Die Drag & Drop-API ermöglicht es Nutzern, das Maus-Taste-gedrückte Halten über ein Element, es an einen anderen Ort zu ziehen, und das Loslassen der Maustaste, um das Element dort abzulegen.

Hier ist ein Beispiel, das erlaubt, einen Inhaltsabschnitt zu ziehen.

<div draggable="true">This text <strong>may</strong> be dragged.</div>

document.querySelector("div").addEventListener("dragstart", (event) => {
  event.dataTransfer.setData("text/plain", "This text may be dragged.");
});

in dem wir:

• Das draggable-Attribut auf true für das Element setzen, das Sie ziehbar machen möchten.
• Einen Listener für das dragstart-Ereignis hinzufügen und die Drag-Daten innerhalb dieses Listeners setzen.

contentEditable

Im Allgemeinen sollten Sie ein <textarea> oder einen geeigneten <input>-Typ innerhalb eines <form> verwenden, um Daten von Nutzern zu sammeln, zusammen mit einem beschreibenden <label>. Diese Elemente erfüllen jedoch möglicherweise nicht Ihre Anforderungen. Beispielsweise erfassen Rich-Text-Editoren kursiven, fetten und normalen Text, aber kein natives Formularsteuerelement erfasst Rich-Text. Dieser Anwendungsfall erfordert, dass Sie eine benutzerdefinierte Steuerung erstellen, die sowohl stilbar als auch editierbar 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 der Standard-TAB-Reihenfolge des Dokuments hinzu, was bedeutet, dass das tabindex-Attribut nicht hinzugefügt werden muss. Wenn Sie jedoch nicht-semantische Elemente für die Dateneingabe verwenden, wenn Sie Ihre eigenen Formularsteuerelemente erstellen, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit Formularsteuerungsfunktionen für alles andere aufzurüsten.

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

• Die role des Elements, Label und Beschreibung müssen mit ARIA hinzugefügt werden.
• Alle Benutzereingabemethoden müssen unterstützt werden, einschließlich Tastatur, Maus, Touch und Zeiger-Ereignissen, die alle oben beschrieben sind.
• JavaScript ist erforderlich, um Funktionen wie Validierung, Versenden und Speichern von nutzeraktualisierten Inhalten zu handhaben.

Anleitungen

• Touch Events Leitfaden
• Managing screen orientation
• Die Verwendung des Vollbildmodus
• Drag-Operationen Leitfaden
• Formularvalidierung
• Formulare durch JavaScript versenden

Referenz

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