Benutzereingabemethoden und -steuerungen

Behandelte Themen

• Zur Unterstützung von Touchscreens interpretieren Touch-Ereignisse die Fingeraktivität auf touch-basierten Benutzeroberflächen, von mobilen Geräten über Kühlschrank-Displays bis hin zu Museums-Kiosk-Anzeigen.
• Die Fullscreen API ermöglicht es, Ihre Inhalte im Vollbildmodus anzuzeigen, was nötig ist, wenn Ihr Formular auf einem Kühlschrank oder einem Museums-Kiosk gezeigt wird.
• Wenn Sie eine benutzerdefinierte Formularsteuerung erstellen müssen, wie einen Rich-Text-Editor, ermöglicht das contentEditable-Attribut, bearbeitbare Steuerungen aus normalerweise nicht bearbeitbaren HTML-Elementen zu erstellen.
• Die Drag and Drop API erlaubt es Benutzern, Elemente über eine Seite zu ziehen und an verschiedenen Orten abzulegen. Dies kann die Benutzererfahrung verbessern, wenn es um das Auswählen von Dateien zum Hochladen oder das Neuanordnen von Inhaltsmodulen innerhalb einer Seite geht.
• Wenn die Bildschirmausrichtung wichtig für Ihr Layout ist, können Sie CSS Media Queries verwenden, um Ihre Formulare basierend auf der Browserausrichtung zu gestalten, 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 bewährten Praktiken, um die größtmögliche Anzahl von Benutzern zu befähigen, Ihre Websites und Anwendungen zu nutzen.

Unterstützung gängiger Eingabemechanismen

Tastatur

Die meisten Benutzer werden eine Tastatur verwenden, um Daten in Ihre Formularsteuerungen einzugeben. Einige werden auch die Tastatur nutzen, um zu diesen Formularsteuerungen zu navigieren. Für die Barrierefreiheit und eine bessere Benutzererfahrung ist es wichtig, alle Formularsteuerungen korrekt zu beschriften. Wenn jede Formularsteuerung korrekt mit einem <label> verknüpft ist, wird Ihr Formular für alle vollständig zugänglich sein, insbesondere für alle, die Ihr Formular nur mit einer Tastatur, einem Bildschirmleser und möglicherweise ohne Bildschirm navigieren.

Wenn Sie zusätzliche Tastaturunterstützung hinzufügen möchten, beispielsweise um eine Formularsteuerung zu validieren, wenn eine bestimmte Taste gedrückt wird, können Sie Event-Listener verwenden, um Tastaturereignisse zu erfassen und darauf zu reagieren. Zum Beispiel, wenn Sie Steuerungen hinzufügen möchten, die aktiviert werden, wenn eine beliebige Taste gedrückt wird, müssen Sie einen Event-Listener am Fensterobjekt hinzufügen:

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

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

Maus

Sie können auch Maus- und andere Zeigerereignisse erfassen. Die Ereignisse, die auftreten, wenn der Benutzer mit einem Eingabegerät wie einer Maus interagiert, werden durch das MouseEvent DOM-Interface dargestellt. Häufige Mausereignisse umfassen click, dblclick, mouseup und mousedown. Die Liste aller Ereignisse, die das Mouse-Event-Interface verwenden, ist im DOM-Ereignisleitfaden 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 Unterstützung für Zeigegeräte zu testen.

Fingertouch

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 dabei helfen, interaktive Elemente und gängige Interaktionsgesten auf Touchscreen-Geräten zu implementieren.

Wenn Sie Touch-Ereignisse verwenden möchten, müssen Sie Event-Listener 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, bei dem Sie die Touch-Ereignisse registrieren möchten.

Zeigerereignisse

Mäuse sind nicht die einzigen Eingabegeräte. Die Geräte Ihrer Benutzer können mehrere Eingabeformen unterstützen, wie Maus, Fingertouch und Stifteingabe. Jeder dieser Zeiger weist eine unterschiedliche Größe auf. Die Pointer Events API kann nützlich sein, wenn Sie Ereignisse geräteübergreifend verwalten müssen, indem Sie die Handhabung jedes Eingabegeräts normalisieren. Ein Zeiger kann jeder Punkt auf dem Bildschirm sein, der durch einen Mauszeiger, einen Stift, eine Berührung (einschließlich Multi-Touch) oder eine andere Zeigereingabeeinheit erzeugt wird.

Die Ereignisse zur Behandlung allgemeiner Zeigereingaben ähneln sehr denen der Maus: pointerdown, pointermove, pointerup, pointerover, pointerout, usw. Das PointerEvent Interface bietet alle Details, die Sie über das Zeigereingabegerät erfassen möchten, einschließlich seiner Größe, des Drucks und des Winkels.

Steuerungen implementieren

Bildschirmausrichtung

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 Formularsteuerungsbreiten basierend auf der Größe oder Ausrichtung des Bildschirms beim Styling von Webformularen zu definieren.

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 (in der Regel Hoch- oder Querformat) sperren, indem Sie die Screen Orientation API verwenden.

• Ausrichtungsdaten können über screenOrientation.type oder mit CSS über die orientation Media Feature abgerufen werden.
• Wenn sich die Bildschirmausrichtung ändert, wird das change-Ereignis auf dem Bildschirmobjekt ausgelöst.
• Das Sperren der Bildschirmausrichtung ist durch Aufrufen 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, z. B. wenn Ihr Formular auf einem Museumskiosk, einer Mautstation oder in einer beliebig ö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

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

Die Drag & Drop API ermöglicht es Benutzern, ein Element anzuklicken und die Maustaste gedrückt zu halten, es an eine andere Stelle 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">This text <strong>may</strong> be dragged.</div>

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

bei dem wir:

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

contentEditable

In der Regel 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 entsprechen möglicherweise nicht Ihren Anforderungen. Beispielsweise erfassen Rich-Text-Editoren kursiven, fetten und normalen Text, aber kein nativer Formularkontrolle erfasst Rich-Text. Dieser Anwendungsfall erfordert, dass Sie eine benutzerdefinierte Steuerung erstellen, die sowohl stilisierbar als auch bearbeitbar ist. Dafür gibt es ein Attribut!

Jedes DOM-Element kann mit dem contenteditable-Attribut direkt bearbeitbar gemacht werden.

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-Tabulatorreihenfolge des Dokuments hinzu, was bedeutet, dass das tabindex-Attribut nicht hinzugefügt werden muss. Wenn Sie jedoch nicht-semantische Elemente zur Dateneingabe verwenden, wenn Sie eigene Formularsteuerungen erstellen, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit Formularsteuerungsfunktionalität für alles andere auszustatten.

Um eine gute Benutzererfahrung zu bieten, muss jede benutzerdefinierte Formularsteuerung, die Sie erstellen, zugänglich sein und wie native Formularelemente funktionieren:

• Der role des Elements, label und description 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 Funktionalität wie Validierung, Einsendung und Speicherung von benutzeraktualisierten Inhalten zu handhaben.

Tutorials

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

Referenz

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