Eingabemethoden und Steuerungen für Benutzer

• Um Touchscreen-Displays zu unterstützen, interpretieren Touch-Ereignisse Fingeraktivitäten auf touchbasierten Benutzeroberflächen, von mobilen Geräten über Kühlschrankpanels bis hin zu Museumskioskanzeigen.
• Die Fullscreen API ermöglicht es Ihnen, Ihre Inhalte im Vollbildmodus anzuzeigen, was notwendig 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 die Erstellung bearbeitbarer Steuerelemente aus normalerweise nicht bearbeitbaren HTML-Elementen.
• Die Drag and Drop API erlaubt Benutzern, Elemente auf einer Seite zu ziehen und an verschiedenen Stellen abzulegen, was die Benutzererfahrung beim Auswählen von Dateien zum Hochladen oder beim Neuanordnen von Inhaltsmodulen innerhalb einer Seite verbessern kann.
• Wenn die Bildschirmorientierung für Ihr Layout wichtig ist, können Sie CSS-Medienabfragen verwenden, um Ihre Formulare basierend auf der Orientierung des Browsers zu stylen. Sie können auch die Screen Orientation API verwenden, um den Bildschirmorientierungsstatus 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 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 verwenden, um zu diesen Formularelementen zu navigieren. Zu beachten ist, dass alle Formularelemente ordnungsgemäß beschriftet sind, um zugänglich zu sein und eine bessere Benutzererfahrung zu bieten. Wenn jedes Formularelement korrekt mit einem <label> verknüpft ist, ist Ihr Formular für alle voll zugänglich, insbesondere für diejenigen, die mit einer Tastatur, einem Screenreader und möglicherweise ohne Bildschirm navigieren.

Wenn Sie zusätzliche Tastaturunterstützung hinzufügen möchten, wie zum Beispiel die Validierung eines Formularelements bei Drücken einer bestimmten Taste, können Sie Ereignislistener verwenden, um auf Tastaturereignisse zu reagieren. Zum Beispiel, wenn Sie Steuerelemente hinzufügen möchten, wenn eine beliebige Taste gedrückt wird, müssen Sie einen Ereignislistener für das Fenster-Objekt hinzufügen:

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

handleKeyDown und handleKeyUp sind Funktionen, die die Kontrolllogik definieren, die ausgeführt wird, 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 das MouseEvent DOM-Interface dargestellt. Häufige Mausereignisse sind click, dblclick, mouseup und mousedown. Eine Liste aller Ereignisse, die das Mausereignis-Interface verwenden, finden Sie in der Ereignisreferenz.

Wenn das Eingabegerät eine Maus ist, können Sie auch Benutzereingaben ü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.

Um zusätzliche Unterstützung für Touchscreen-Geräte bereitzustellen, ist es ratsam, 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 sollen, 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 wie Maus, Fingerberührung und Stifteingabe enthalten. Jeder dieser Zeiger hat eine andere Größe. Die Pointer Events API kann nützlich sein, wenn Sie Ereignisse geräteübergreifend verwalten müssen, indem Sie die Handhabung jedes einzelnen normalisieren. Ein Zeiger kann jeder Kontaktpunkt auf dem Bildschirm sein, der von einem Mauszeiger, Stift, Berührung (einschließlich Multi-Touch) oder einem anderen Eingabegerät erzeugt wird.

Die Ereignisse zur Behandlung von generischer Zeigereingabe sehen ähnlich aus wie die für die Maus: pointerdown, pointermove, pointerup, pointerover, pointerout, etc. Das PointerEvent Interface bietet alle Details, die Sie möglicherweise über das Zeigegerät erfassen möchten, einschließlich seiner Größe, Druck und Winkel.

Wenn Sie leicht unterschiedliche Layouts benötigen, je nachdem, ob der Benutzer den Hoch- oder Querformatmodus verwendet, können Sie CSS-Medienabfragen verwenden, um CSS für verschiedene Layouts oder Formularelementbreiten basierend auf der Größe oder Ausrichtung des Bildschirms beim Styling von Webformularen zu definieren.

Wenn die Bildschirmorientierung für Ihr Formular wichtig ist, können Sie den Bildschirmorientierungsstatus lesen, benachrichtigt werden, wenn sich dieser Zustand ändert, und in der Lage sein, die Bildschirmorientierung auf einen bestimmten Zustand (normalerweise Hochformat oder Querformat) zu sperren, durch die Screen Orientation API.

• Die Orientierungsdaten können über screenOrientation.type oder mit CSS durch die orientation Medienfunktion abgerufen werden.
• Wenn sich die Bildschirmorientierung ändert, wird das change Ereignis für das Bildschirmobjekt ausgelöst.
• Das Sperren der Bildschirmorientierung ist möglich, indem die Methode ScreenOrientation.lock() aufgerufen wird.
• Die Methode ScreenOrientation.unlock() entfernt alle zuvor gesetzten Bildschirmsperren.

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

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

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

Hier ist ein Beispiel, das 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.");
});

in dem wir:

• Die draggable Eigenschaft auf true setzen, um das Element, das Sie ziehbar machen möchten.
• Einen Listener für das dragstart Ereignis hinzufügen und die Ziehdaten innerhalb dieses Listeners setzen.

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 entsprechen möglicherweise nicht Ihren Anforderungen. Zum Beispiel erfassen Rich-Text-Editoren kursiv, fett und normalen Text, jedoch kein natives Formularelement erfasst Rich-Text. Dieser Anwendungsfall erfordert, dass Sie ein benutzerdefiniertes Steuerelement erstellen, das sowohl stilisierbar als auch bearbeitbar 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 in die Standardreihenfolge der Tabulatoren des Dokuments ein, was bedeutet, dass das tabindex Attribut nicht hinzugefügt werden muss. Wenn Sie jedoch nicht-semantische Elemente zur Dateneingabe verwenden, wenn Sie Ihre eigenen Formularelemente erstellen, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit der Formularelementfunktionalität für alles andere nachzurüsten.

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

• Das role, das label und die description des Elements müssen mit ARIA hinzugefügt werden.
• Alle Benutzereingabemethoden müssen unterstützt werden, einschließlich Tastatur, Maus, Berührung und Zeiger Ereignisse, die alle oben beschrieben werden.
• JavaScript ist erforderlich, um Funktionen wie Validierung, Einreichung und Speichern von benutzeraktualisierten Inhalten zu handhaben.

• Touch-Ereignisse-Leitfaden
• Verwaltung der Bildschirmorientierung
• Verwendung des Vollbildmodus
• Drag & Drop-Leitfaden
• Formularvalidierung
• Senden von Formularen durch JavaScript

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