Methoden und Steuerungen für Benutzereingaben

• Zur Unterstützung von Touchscreen-Anzeigen interpretieren Touch-Ereignisse Fingeraktivitäten auf touchbasierten Benutzeroberflächen von mobilen Geräten bis hin zu Kühlschrank-Panels und Museumskiosk-Anzeigen.
• Die Fullscreen API ermöglicht es Ihnen, Ihre Inhalte im Vollbildmodus anzuzeigen, was erforderlich sein kann, wenn Ihr Formular auf einem Kühlschrank oder Museumskiosk serviert wird.
• Wenn Sie ein benutzerdefiniertes Formularelement erstellen müssen, wie etwa 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 anderen Stellen abzulegen. Dies kann die Benutzererfahrung beim Auswählen von Dateien zum Hochladen oder beim Umsortieren von Inhaltsmodulen innerhalb einer Seite verbessern.
• Wenn die Bildschirmorientierung für Ihr Layout wichtig ist, können Sie CSS-Media-Abfragen verwenden, um Ihre Formulare basierend auf der Browserorientierung zu gestalten, oder sogar die Screen Orientation API verwenden, um den Bildschirmorientierungsstatus zu lesen und andere Aktionen auszuführen.

Die folgenden Abschnitte bieten eine Reihe von Empfehlungen und Best Practices, um die größtmögliche Anzahl von Benutzern dabei zu unterstützen, Ihre Websites und Anwendungen zu nutzen.

Die meisten Benutzer werden eine Tastatur verwenden, um Daten in Ihre Formularelemente einzugeben. Einige werden auch die Tastatur nutzen, um zu diesen Formularelementen zu navigieren. Um barrierefrei zu sein und für eine bessere Benutzererfahrung, ist es wichtig, alle Formularelemente korrekt zu beschriften. Wenn jedes Formularelement korrekt mit einem <label> verbunden ist, ist Ihr Formular für alle zugänglich, insbesondere für Personen, die es mit einer Tastatur, einem Screenreader und möglicherweise ganz ohne Bildschirm navigieren.

Wenn Sie zusätzliche Tastaturunterstützung hinzufügen möchten, z.B. eine Validierung eines Formularelements, wenn eine bestimmte Taste gedrückt wird, können Sie Ereignishandler verwenden, um auf Tastenereignisse zu reagieren. Beispielweise, wenn Sie Steuerelemente hinzufügen möchten, wenn eine beliebige Taste gedrückt wird, müssen Sie einen Ereignishandler auf dem Fensterobjekt hinzufügen:

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

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

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 das MouseEvent DOM-Interface dargestellt. Zu den gängigen Mauserereignissen gehören click, dblclick, mouseup und mousedown. Die vollständige Liste der Ereignisse, die das MousEvent-Interface verwenden, finden Sie in der Ereignisreferenz.

Wenn das Eingabegerät eine Maus ist, können Sie auch die 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 Touchscreengeräte bereitzustellen, ist es eine gute Praxis, die unterschiedlichen Fähigkeiten in Bezug auf Bildschirmauflösung und Benutzereingabe zu berücksichtigen. Touch-Ereignisse können Ihnen helfen, interaktive Elemente und allgemeine Interaktionsgesten auf Touchscreengeräten zu implementieren.

Wenn Sie Touch-Ereignisse einsetzen möchten, müssen Sie Ereignishandler hinzufügen und Handler-Funktionen 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 Eingabemethoden umfassen, wie Maus, Fingerberührung und Stifteingabe. Jeder dieser Zeiger hat eine unterschiedliche Größe. Die Pointer Events API kann nützlich sein, wenn Sie Ereignisse geräteübergreifend verwalten müssen, indem Sie die Behandlung jedes einzelnen normalisieren. Ein Zeiger kann jeder Kontaktpunkt am Bildschirm sein, der durch einen Mauszeiger, einen Stift, eine Berührung (einschließlich Multi-Touch) oder ein anderes Zeigereingabegerät erfolgt.

Die Ereignisse zur Behandlung generischer Zeigereingaben ähneln denen für die Maus: pointerdown, pointermove, pointerup, pointerover, pointerout, usw. Das PointerEvent Interface 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-Abfragen 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 Bildschirmorientierung für Ihr Formular wichtig ist, können Sie den Bildschirmorientierungsstatus lesen, informiert werden, wenn sich dieser ändert, und die Bildschirmorientierung auf einen bestimmten Zustand (in der Regel Hoch- oder Querformat) über die Screen Orientation API sperren.

• Orientierungsdaten können über screenOrientation.type oder mit CSS durch das orientation Medienmerkmal 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 vorher festgelegten Bildschirmsperren.

Wenn Sie Ihr Formular im Vollbildmodus präsentieren müssen, z.B. wenn Ihr Formular auf einem Museumskiosk, einem Mautstellen- oder tatsächlich in einer öffentlich angezeigten Benutzeroberfläche dargestellt 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 häufige Benutzerinteraktion ist das physische Ziehen von Elementen, die an anderer Stelle auf dem Bildschirm abgelegt werden sollen. Drag and Drop kann die Benutzererfahrung beim Auswählen von Dateien zum Hochladen oder beim Umsortieren von Inhaltsmodulen innerhalb einer Seite verbessern. Dafür gibt es eine API!

Die Drag & Drop API ermöglicht es Benutzern, ein Element durch Klicken und Gedrückthalten der Maustaste zu ziehen, es an einen anderen Ort zu verschieben und die Maustaste loszulassen, um das Element dort abzulegen.

Hier ist ein Beispiel, das es ermöglicht, einen Inhaltsabschnitt 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 Attribut draggable auf true für das Element setzen, das Sie verschiebbar machen möchten.
• Einen Listener für das dragstart Ereignis hinzufügen und die Drag-Daten innerhalb dieses Listeners setzen.

Im Allgemeinen sollten Sie ein <textarea> oder einen entsprechenden <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. Zum Beispiel erfassen Rich-Text-Editoren kursiven, fetten und normalen Text, aber keine native Formularelement erfasst Rich-Text. Dieser Anwendungsfall erfordert es, ein benutzerdefiniertes Steuerelement zu erstellen, das sowohl stilisierbar 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 der Standardtabulatorreihenfolge des Dokuments hinzu, was bedeutet, dass das tabindex Attribut nicht hinzugefügt werden muss. Wenn jedoch nicht-semantische Elemente für die Dateneingabe bei der Erstellung Ihrer eigenen Formularelemente verwendet werden, müssen Sie JavaScript und ARIA hinzufügen, um das Element mit Formularkontrollfunktionalität 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:

• 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, Berührung und Zeiger Ereignisse, die oben beschrieben sind.
• JavaScript ist erforderlich, um Funktionalitäten wie Validierung, Einreichung und Speicherung von benutzeraktualisierten Inhalten zu verwalten.

• Leitfaden für Touch-Ereignisse
• Bildschirmorientierung verwalten
• Vollbildmodus verwenden
• Leitfaden für Drag-Operationen
• Formularvalidierung
• Formulare durch JavaScript senden

• MouseEvent Interface
• KeyboardEvent Interface
• Touch-Ereignisse API
• Pointer Lock API
• Bildschirmorientierungs- API
• Vollbild- API
• Drag & Drop API
• HTML contenteditable Attribut