Entrées utilisateur et méthodes

La diagramme suivant illustre le déroulement des opérations typique pour implémenter les mécanismes d'entrée utilisateur:

Tout d'abord vous devez décider quels mécanismes en entrées vous voulez prendre en charge dans votre application: souris, clavier, doigt, etc. Une fois que vous avez décidé, vous pouvez les contrôler en utilisant les outils offerts par la plateforme web ou par des bibliothèques JavaScript.

Les mécanismes en entrées dépendent des capacités de l'appareil qui exécute l'application:

• Certains appareils ont des écrans tactiles: le plateforme web dispose des événements tactiles pour interpréter l'activité du doigt sur les interfaces tactiles.
• Pour les appareils ayant une souris/pavé tactile comme méthode de pointage, l'API Pointer Lock aide à implémenter un jeu 3D à la première personne ou toute autre application nécessisant un contrôle total du dispositif de pointage. L'API Fullscreen quant à elle aide à afficher l'application en mode plein écran.
• En utilisant les fonctionnalités telles que les éléments contentEditable, vous pouvez implémenter des éditeurs rich-text rapidement et avec Drag&Drop vous pouvez laisser les utilisateurs déplacer des éléments dans votre application. Quand l'orientation de l'écran a de l'importance pour votre application, vous pouvez lire l'orientation de l'écran à travers l'API Screen Orientation et verrouiller l'écran dans un sens.
• Vous devriez toujours être attentif à l'accessibilité du clavier quand c'est approprié — beaucoup d'utilisateurs web utilisent uniquement le clavier pour naviger sur les sites web et applications, et les bloquer hors de votre fonctionnalité est une mauvaise idée.

Vous trouverez ci-dessous un ensemble de recommandations et meilleures pratiques pour utiliser de tels outils dans des Open Web Apps.

Clavier

La saisie du clavier peut être contrôlée par votre application. Par exemple, si vous voulez ajouter des contrôles déclenchés quand des touches sont pressées, vous devez ajouter un gestionnaire d'événement sur l'objet window:

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

où handleKeyDown et handleKeyUp sont des fonctions implémentant les contrôles sur les événements keydown et keyup.

Souris

Les événements qui se produisent quand l'utilisateur interagit avec un appareil de pointage comme une souris sont représentés par l'interface DOM MouseEvent. Les événements de souris les plus communs sont click, dblclick, mouseup, et mousedown. La liste de tous les événements souris utilisant l'interface MouseEvent est disponible dans la Référence des événements.

Quand le périphérique d'entrée est une souris, vous pouvez également contrôler les entrées utilisateur avec l'API Pointer Lock et implémenter le Drag & Drop (voir ci-dessous).

Toucher du doigt

Quand vous développez des applications web destinées à être installées sur des appareils à écran tactile, il est recommandé de prendre en considération les différentes capacités de l'appareil, en terme de résolution d'écran et d'entrée utilisateur. Les événements tactiles peuvent vous aider à implémenter des éléments interactifs et des geste d'interactions courants sur les appareils à écran tactile.

Si vous voulez utiliser les événements tactiles, vous devez ajouter des gestionnaires d'événement et spécifier des fonctions de rappel, appelées quand l'événement est déclenché:

element.addEventListener("touchstart", handleStart, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchcancel", handleCancel, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchmove", handleMove, false);

où element est l'élément du DOM sur lequel vous voulez enregistrer les événements tactiles.

Événements de pointeur

Quand vous avez affaire à des appareils qui incorporent de multiples formes d'entrée, comme la souris, le toucher du doigt et la saisie au stylet, il peut être difficile de développer une solution qui marche pour tous ces mécanismes de contrôle différents. Les événements de pointeur aident les développeurs à gérer plus facilement les événements sur les appareils en normalisant le traitement de chacun d'entre eux. Un pointeur peut être n'importe quel contact sur l'écran, fait par le curseur d'une souris, d'un stylo, le toucher (y compris multi-touch) ou autre périphérique d'entrée de pointage. Les événements génériques pour gérer la saisie du pointeur ressemblent beaucoup à ceux pour la souris: pointerdown, pointermove, pointerup, pointerover, pointerout, etc.

Verrouiller le pointeur

Dans certains cas, typiquement dans le développement de jeux, vous pouvez avoir besoin d'accéder aux événements de la souris même lorsque le curseur dépasse la limite du navigateur ou de l'écran: l'API Pointer Lock vous donne le contrôle total de l'appareil de pointage.

Voici le code pour demander que le pointeur soit bloqué à l'intérieur d'element:

element.requestPointerLock();

Orientation de l'écran

Si l'orientation de l'écran est importante pour votre application, vous pouvez lire l'état de l'orientation de l'écran, être informé quand cet état change, et verrouiller l'orientation dans un état spécifique (habituellement portrait ou paysage) à travers l'API Screen Orientation.

Les données d'orientation peuvent être récupérées à travers l'attribut screen.orientation (en-US) ou à travers la media query orientation. Quand screen.orientation change, l'événement screen.orientationchange est declenché sur l'objet screen. Verrouiller l'orientation de l'écran en possible en invoquant la méthode screen.lockOrientation (en-US), tandis que la méthode screen.unlockOrientation (en-US) supprime le verrouillage de l'écran précédemment définit.

Plein écran

Vous pourriez avoir besoin de présenter un élément de votre application (comme une <video> par exemple) en mode plein écran. Vous pouvez y parvenir en appelant Element.requestFullscreen() sur cet élément. Gardez à l'esprit que beaucoup de navigateurs l'implémentent encore avec un préfixe de fournisseur, vous aurez donc probablement besoin de découper votre code ainsi:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Drag & Drop

Drag & Drop (glisser/déposer) permet à l'utilisateur de votre application de cliquer sur un élément, maintenir le bouton de la souris enfoncé sur cet élément, le faire glisser vers un autre emplacement, et relacher le bouton de la souris pour le déposer à cet emplacement.

Voici un exemple qui permet à du contenu d'être déplacé:

<div
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être déplacé')">
  Ce texte <strong>peut</strong> être déplacé.
</div>

Ici, on

• Définit l'attribut draggable à vrai pour que l'élément puisse être déplacé.
• Ajoute un gestionnaire d'événement dragstart qui définit les données de déplacement à l'intérieur.

contentEditable

Dans un Open Web App, tout élément DOM peut être rendu directement éditable en utilisant l'attribut contenteditable.

<div contenteditable="true">Ce texte peut être édité par l'utilisateur.</div>

Suivre plusieurs points de contact à la fois

Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un <canvas> avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.

Démo de verrouillage de pointeur simple

Vous avons écrit une démo de verrouillage de pointeur pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple. Cette démo utilise JavaScript pour dessiner une balle dans un élément <canvas>. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris.

Démo contentEditable

Ceci est un exemple qui montre comment contenteditable peut être utilisé pour créer une section de document éditable, et dont l'état est sauvegardé en utilisant LocalStorage.

• Événement tactiles
• Gérer l'orientation de l'écran
• Utiliser le mode plein écran
• Drag & Drop de multiples éléments
• Opérations de glissement

• MouseEvent
• KeyboardEvent
• Événements tactiles
• Pointer Lock API
• Screen Orientation API
• Fullscreen API
• Drag & Drop
• Content Editable
• Implementing TV remote control navigation