Methoden und Steuerelemente für Benutzereingaben

• Um Touchscreen-Displays zu unterstützen, interpretieren Touch-Events Fingeraktivitäten auf touchbasierten Benutzeroberflächen von mobilen Geräten, Kühlschrankpanelen bis hin zu 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 einen Rich-Text-Editor, ermöglicht das contentEditable-Attribut das Erstellen von bearbeitbaren Steuerelementen aus normalerweise nicht bearbeitbaren HTML-Elementen.
• Die Drag and Drop API ermöglicht es Benutzern, Elemente auf einer Seite zu ziehen und an verschiedenen Stellen abzulegen. Dies kann dazu beitragen, die Benutzererfahrung beim Auswählen von Dateien zum Hochladen oder beim Neuanordnen von Inhaltsmodulen innerhalb einer Seite zu verbessern.
• Wenn die Bildschirmausrichtung für Ihr Layout entscheidend ist, können Sie CSS-Medienabfragen verwenden, um Ihre Formulare basierend auf der Browserausrichtung zu gestalten, oder sogar die Screen Orientation API verwenden, um den Zustand der Bildschirmausrichtung abzulesen und weitere Aktionen durchzuführen.

Die folgenden Abschnitte bieten eine Reihe von Empfehlungen und bewährten Praktiken, um die größte mögliche Anzahl von Nutzern in die Lage zu versetzen, Ihre Websites und Anwendungen zu nutzen.

Die meisten Benutzer werden eine Tastatur verwenden, um Daten in Ihre Formularelemente einzugeben. Einige werden auch die Tastatur benutzen, um zu diesen Formularelementen zu navigieren. Um zugänglich zu sein und eine bessere Benutzererfahrung zu bieten, ist es wichtig, alle Formularelemente ordnungsgemäß zu beschriften. Wenn jedes Formularelement korrekt mit einem <label> verknüpft ist, wird Ihr Formular für alle zugänglich sein, insbesondere für alle, die mit einer Tastatur, 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 Ereignis-Listener 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 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 wird, wenn die Ereignisse keydown und keyup ausgelöst werden.

Sie können auch Maus- und andere Zeigegerätereignisse erfassen. Die Ereignisse, die auftreten, wenn der Benutzer mit einem Zeigegerät wie einer Maus interagiert, werden durch das MouseEvent DOM Interface dargestellt. Häufige Mausereignisse sind click, dblclick, mouseup und mousedown. Die Liste aller Ereignisse, die das Mouse Event Interface verwenden, finden Sie in der Ereignisreferenz.

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 zu testen, ob Zeigegeräte unterstützt werden.

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 Benutzereingaben zu berücksichtigen. Touch-Events können Ihnen helfen, interaktive Elemente und gängige Interaktionsgesten auf Touchscreen-Geräte 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-Events registrieren möchten.

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

Die Ereignisse zur Handhabung generischer Zeigereingaben ähneln stark 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, 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-Medienabfragen verwenden, um CSS für unterschiedliche Layouts oder Formularelementbreiten basierend auf der Größe oder Ausrichtung des Bildschirms beim Gestalten von Webformularen zu definieren.

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

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

Wenn Sie Ihr Formular im Vollbildmodus präsentieren müssen, wie z.B., wenn Ihr Formular auf einem Museumskiosk, einer Mautstelle oder allgemein in einer öffentlich angezeigten Benutzeroberfläche angezeigt wird, können Sie dies erreichen, 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 an anderer Stelle auf dem Bildschirm abzulegen. Drag and Drop kann die Benutzererfahrung beim Auswählen von Dateien zum Hochladen oder beim Neuanordnen von Inhaltsmodulen innerhalb einer Seite verbessern. Es gibt eine API dafür!

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

Hier ein Beispiel, das erlaubt, einen Abschnitt eines Inhalts 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, bei dem Element, das Sie ziehbar machen möchten.
• Einen Listener für das dragstart-Ereignis hinzufügen und die Ziehdaten innerhalb dieses Listeners setzen.

Normalerweise sollten Sie ein <textarea> oder einen geeigneten <input>-Typ innerhalb eines <form> verwenden, um Daten von Benutzern zu erfassen, zusammen mit einem beschreibenden <label>. Aber diese Elemente entsprechen möglicherweise nicht Ihren Anforderungen. Beispielsweise erfassen Rich-Text-Editoren kursiven, fettgedruckten und normalen Text, aber keine native Formularelement erfasst Rich-Text. Dieser Anwendungsfall erfordert, dass Sie ein benutzerdefiniertes Steuerelement erstellen, das sowohl stilisierbar 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 standardmäßigen 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 Formularelemente erstellen, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit Funktionalität für Formularelemente für alles andere auszustatten.

Um ein gutes Benutzererlebnis zu bieten, muss jedes benutzerdefinierte Formularelement, das Sie erstellen, zugänglich sein und wie native Formularelemente funktionieren:

• Dem Element müssen mit ARIA die Rolle, das Label und die Beschreibung hinzugefügt werden.
• Alle Benutzereingabemethoden müssen unterstützt werden, einschließlich Tastatur, Maus, Touch und Zeiger Ereignisse, die alle oben beschrieben sind.
• JavaScript ist erforderlich, um Funktionalitäten wie Validierung, Einreichung und das Speichern aktualisierter Benutzerdaten zu handhaben.

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

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