Benutzereingabemethoden und Steuerungen

• Um Touchscreen-Displays zu unterstützen, interpretieren Touch Events die Fingeraktivität auf touchbasierten Benutzeroberflächen, von mobilen Geräten über Kühlschrankpanels bis hin zu Museums-Kiosken.
• 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 editierbaren 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 Orten abzulegen. Dies kann die Benutzererfahrung beim Auswählen von Dateien zum Hochladen oder beim Neuanordnen von Inhaltsmodulen auf einer Seite verbessern.
• Wenn die Bildschirmorientierung für Ihr Layout von Bedeutung ist, können Sie CSS-Media-Queries verwenden, um Ihre Formulare basierend auf der Browserorientierung zu stylen oder sogar die Screen Orientation API nutzen, um den Bildschirmorientierungszustand zu lesen und andere Aktionen durchzuführen.

Die folgenden Abschnitte bieten eine Reihe von Empfehlungen und Best Practices, um die größtmögliche Bandbreite an Benutzern zu unterstützen, 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 eine bessere Benutzererfahrung, ist es wichtig, alle Formularelemente korrekt zu beschriften. Wenn jedes Formularelement korrekt mit einem <label> verknüpft ist, ist Ihr Formular für alle vollständig zugänglich, insbesondere für diejenigen, die Ihr Formular mit einer Tastatur, einem Screenreader und möglicherweise ohne Bildschirm navigieren.

Wenn Sie zusätzliche Tastaturunterstützung hinzufügen möchten, z. B. die Validierung eines Formularelements, wenn eine bestimmte Taste gedrückt wird, können Sie Ereignis-Listener verwenden, um Tastaturereignisse zu erfassen und darauf zu reagieren. Wenn Sie beispielsweise Steuerungen hinzufügen möchten, wenn eine beliebige Taste gedrückt wird, müssen Sie einen Ereignis-Listener auf dem Fensterobjekt hinzufügen:

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

handleKeyDown und handleKeyUp sind Funktionen, die die Steuerungslogik 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 von der MouseEvent DOM-Schnittstelle repräsentiert. Häufige Mausereignisse sind click, dblclick, mouseup und mousedown. Die Liste aller Ereignisse, die die Maus-Event-Schnittstelle verwenden, finden Sie im DOM Events-Leitfaden.

Wenn das Eingabegerät eine Maus ist, können Sie auch die Benutzerinteraktion über die Pointer Lock API steuern und Drag & Drop implementieren (siehe unten). Sie können auch CSS verwenden, um auf die Unterstützung für Zeigegerä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 Events können Ihnen dabei helfen, interaktive Elemente und gängige Interaktionsgesten auf Touchscreen-Geräten zu implementieren.

Wenn Sie Touch Events verwenden möchten, müssen Sie Ereignis-Listener 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 umfassen, wie Maus, Fingertipp und Stifteingabe. Jeder dieser Zeiger hat eine unterschiedliche Größe. Die Pointer Events API kann nützlich sein, wenn Sie Ereignisse über verschiedene Geräte hinweg verwalten müssen, indem Sie die Behandlung jedes einzelnen normalisieren. Ein Zeiger kann jeder Kontaktpunkt auf dem Bildschirm sein, der durch einen Mauszeiger, einen Stift, eine Berührung (einschließlich Multitouch) oder ein anderes Zeigereingabegerät hergestellt wird.

Die Ereignisse zur Behandlung generischer Zeigereingaben ähneln denen für die Maus: pointerdown, pointermove, pointerup, pointerover, pointerout usw. Die PointerEvent-Schnittstelle bietet alle Details, die Sie möglicherweise über das Zeigereingabegerä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 im Hoch- oder Querformat ist, können Sie CSS-Media-Queries verwenden, um CSS für unterschiedliche Layouts oder Formularelementbreiten basierend auf der Größe oder Orientierung des Bildschirms zu definieren, wenn Sie Webformulare stylen.

Wenn die Bildschirmorientierung für Ihr Formular von Bedeutung ist, können Sie den Bildschirmorientierungszustand lesen, benachrichtigt werden, wenn sich dieser Zustand ändert, und in der Lage sein, die Bildschirmorientierung durch die Screen Orientation API auf einen bestimmten Zustand (normalerweise Hoch- oder Querformat) 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, z. B. wenn Ihr Formular auf einem Museumskiosk, einer Mautstation oder wirklich jeder öffentlich angezeigten Benutzeroberfläche angezeigt wird, ist dies möglich, indem Sie Element.requestFullscreen() für dieses Element aufrufen:

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

Eine gängige 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 für den Upload auszuwählen oder Inhaltsmodule auf einer Seite neu anzuordnen. Dafür gibt es eine API!

Die Drag & Drop API ermöglicht es Benutzern, ein Element mit gedrückter Maustaste anzuzeigen, es an einen anderen Ort zu ziehen und es durch Loslassen der Maustaste dort abzulegen.

Hier ist ein Beispiel, das es ermöglicht, einen Inhaltsbereich 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 Ziehdaten in diesem Listener 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 Anforderungen. Ein Beispiel: Rich-Text-Editoren erfassen kursiven, fettgedruckten und normalen Text, aber kein natives Formularelement erfasst Rich-Text. Dieser Anwendungsfall erfordert, dass Sie ein benutzerdefiniertes Steuerelement erstellen, das sowohl stylbar als auch editierbar ist. Dafür gibt es ein Attribut!

Jedes DOM-Element kann direkt editierbar 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 zur Standard-Tabbing-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 Formularelemente erstellen, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit Formularsteuerungsfunktionalität für alles andere nachzurüsten.

Um eine gute Benutzererfahrung zu bieten, muss jedes benutzerdefinierte Formularelement, das Sie erstellen, zugänglich und so funktional wie native Formularelemente sein:

• 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 Zeigereignisse, alle oben beschrieben.
• JavaScript ist erforderlich, um Funktionen wie Validierung, Einsendung und Speichern von benutzeraktualisierten Inhalten zu verwalten.

• Touch Events Leitfaden
• Verwalten der Bildschirmorientierung
• Vollbildmodus verwenden
• Drag Operations Leitfaden
• Formularvalidierung
• Formulare über JavaScript senden

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