Gérer les événements clavier dans une page web

Introduction

Dans ce laboratoire, les participants apprendront à gérer les événements clavier dans une page web en créant une interface HTML interactive qui répond aux frappes clavier de l'utilisateur. Le laboratoire se concentre sur l'implémentation d'événement gestionnaires tels que onkeydown et onkeyup pour modifier dynamiquement la couleur du texte et démontrer une interaction clavier en temps réel. Les participants commenceront par configurer un document HTML structuré avec un élément d'entrée et un style, puis ajouteront progressivement des fonctionnalités JavaScript pour capturer et répondre aux événements clavier.

Le laboratoire propose une approche pratique pour comprendre la gestion des événements clavier, couvrant des techniques clés telles que la détection des pressions de touches, la modification des éléments de page et la mise en œuvre d'écouteurs d'événements. En suivant le processus étape par étape, les apprenants acquerront une expérience pratique dans la création d'interfaces web réactives qui peuvent détecter et réagir aux interactions clavier de l'utilisateur, renforçant leur compréhension de la gestion des événements côté client dans le développement web.

Configurer la structure HTML avec un élément d'entrée

Dans cette étape, nous allons créer la structure HTML de base pour notre laboratoire de gestion des événements clavier. Nous allons configurer un fichier HTML avec un élément d'entrée qui servira de cible pour nos événements clavier.

Ouvrez l'IDE Web et créez un nouveau fichier nommé index.html dans le répertoire ~/projet. Nous commencerons par créer un document HTML5 simple avec une structure de base et un élément d'entrée.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Keyboard Events Lab</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .container {
        text-align: center;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      input {
        padding: 10px;
        font-size: 16px;
        width: 300px;
        margin-bottom: 10px;
      }
      #output {
        margin-top: 10px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Keyboard Events Lab</h1>
      <input type="text" id="keyboardInput" placeholder="Type something here" />
      <div id="output"></div>
    </div>
  </body>
</html>

Analysons les composants clés de cette structure HTML :

Nous avons créé une mise en page simple et centrée avec un div conteneur.
Un élément <input> avec l'ID keyboardInput est ajouté comme point d'interaction principal.
Un <div> avec l'ID output est inclus pour afficher des informations liées aux événements.
Du CSS de base est ajouté pour améliorer l'apparence visuelle et la mise en page.

Ce paramétrage initial fournit une interface propre et conviviale pour notre démonstration d'événements clavier. Dans les étapes suivantes, nous ajouterons du JavaScript pour gérer les événements clavier sur cet élément d'entrée.

Implémenter l'événement onkeydown pour changer la couleur du texte

Dans cette étape, nous allons ajouter du JavaScript pour implémenter le gestionnaire d'événements onkeydown pour notre élément d'entrée. Cet événement changera la couleur du texte lorsqu'une touche est enfoncée.

Ouvrez le fichier index.html dans l'IDE Web et ajoutez une balise <script> juste avant la balise de fermeture </body> pour inclure notre code JavaScript :

<script>
  // Obtenez les références à l'élément d'entrée et au div de sortie
  const inputElement = document.getElementById("keyboardInput");
  const outputElement = document.getElementById("output");

  // Ajoutez un écouteur d'événements onkeydown pour changer la couleur du texte
  inputElement.onkeydown = function (event) {
    // Changez la couleur du texte de l'entrée en rouge lorsqu'une touche est enfoncée
    this.style.color = "red";

    // Affichez des informations sur la touche enfoncée
    outputElement.textContent = `Touche enfoncée : ${event.key} (Code de touche : ${event.keyCode})`;
  };
</script>

Analysons les parties clés de ce code :

document.getElementById() est utilisé pour obtenir les références aux éléments d'entrée et de sortie.
inputElement.onkeydown ajoute un écouteur d'événements pour l'événement keydown.
Dans le gestionnaire d'événements :
- this.style.color ='red' change la couleur du texte en rouge lorsqu'une touche est enfoncée.
- outputElement.textContent affiche des informations sur la touche enfoncée.

Exemple de sortie lorsque vous tapez dans le champ d'entrée :

Le texte deviendra rouge à mesure que vous tapez
Le div de sortie affichera la dernière touche enfoncée et son code de touche

Cela démontre comment fonctionne l'événement onkeydown :

Il est déclenché chaque fois qu'une touche est enfoncée
Fournit un accès aux détails de l'événement comme la touche enfoncée
Permet une manipulation dynamique des styles d'éléments

Implémenter l'événement onkeyup pour restaurer la couleur d'origine du texte

Dans cette étape, nous allons ajouter le gestionnaire d'événements onkeyup pour restaurer la couleur du texte d'entrée à son état d'origine lorsque la touche est relâchée. Nous modifierons le script existant dans le fichier index.html pour inclure cette fonctionnalité.

Mettez à jour la section <script> dans votre fichier index.html avec le code suivant :

<script>
  // Obtenez les références à l'élément d'entrée et au div de sortie
  const inputElement = document.getElementById("keyboardInput");
  const outputElement = document.getElementById("output");

  // Ajoutez un écouteur d'événements onkeydown pour changer la couleur du texte
  inputElement.onkeydown = function (event) {
    // Changez la couleur du texte de l'entrée en rouge lorsqu'une touche est enfoncée
    this.style.color = "red";

    // Affichez des informations sur la touche enfoncée
    outputElement.textContent = `Touche enfoncée : ${event.key} (Code de touche : ${event.keyCode})`;
  };

  // Ajoutez un écouteur d'événements onkeyup pour restaurer la couleur d'origine du texte
  inputElement.onkeyup = function (event) {
    // Restaurez la couleur du texte de l'entrée en noir lorsque la touche est relâchée
    this.style.color = "black";

    // Mettez à jour la sortie avec des informations sur le relâchement de la touche
    outputElement.textContent = `Touche relâchée : ${event.key} (Code de touche : ${event.keyCode})`;
  };
</script>

Analysons le nouveau gestionnaire d'événements onkeyup :

inputElement.onkeyup ajoute un écouteur d'événements pour l'événement keyup.
Dans le gestionnaire d'événements :
- this.style.color = 'black' restaure la couleur du texte en noir lorsque la touche est relâchée.
- outputElement.textContent affiche des informations sur la touche relâchée.

Exemple d'interaction :

Lorsque vous appuyez sur une touche, le texte devient rouge
Lorsque vous relâchez la touche, le texte revient au noir
Le div de sortie montre les détails des événements de pression et de relâchement de la touche

Cela démontre la différence entre les événements onkeydown et onkeyup :

onkeydown est déclenché lorsqu'une touche est enfoncée
onkeyup est déclenché lorsqu'une touche est relâchée
Les deux événements fournissent un accès aux informations sur la touche

Ajouter un gestionnaire d'événement window.onload

Dans cette étape, nous allons présenter le gestionnaire d'événements window.onload pour démontrer comment exécuter du code JavaScript après que toute la page web ait fini de charger. Nous allons ajouter une fonction d'initialisation qui fournit un message initial et configure un certain style par défaut.

Mettez à jour la section <script> dans votre fichier index.html avec le code suivant :

<script>
  // Gestionnaire d'événements window.onload
  window.onload = function () {
    // Obtenez les références à l'élément d'entrée et au div de sortie
    const inputElement = document.getElementById("keyboardInput");
    const outputElement = document.getElementById("output");

    // Définissez le message initial lorsque la page est chargée
    outputElement.textContent =
      "Page chargée! Commencez à taper dans le champ d'entrée.";
    outputElement.style.color = "vert";

    // Ajoutez un écouteur d'événements onkeydown pour changer la couleur du texte
    inputElement.onkeydown = function (event) {
      // Changez la couleur du texte de l'entrée en rouge lorsqu'une touche est enfoncée
      this.style.color = "rouge";

      // Affichez des informations sur la touche enfoncée
      outputElement.textContent = `Touche enfoncée : ${event.key} (Code de touche : ${event.keyCode})`;
      outputElement.style.color = "bleu";
    };

    // Ajoutez un écouteur d'événements onkeyup pour restaurer la couleur d'origine du texte
    inputElement.onkeyup = function (event) {
      // Restaurez la couleur du texte de l'entrée en noir lorsque la touche est relâchée
      this.style.color = "noir";

      // Mettez à jour la sortie avec des informations sur le relâchement de la touche
      outputElement.textContent = `Touche relâchée : ${event.key} (Code de touche : ${event.keyCode})`;
      outputElement.style.color = "vert";
    };
  };
</script>

Changements clés dans cette étape :

Entouré les gestionnaires d'événements existants à l'intérieur de la fonction window.onload
Ajouté un message initial lorsque la page est chargée
Introduit des changements de couleur pour l'élément de sortie pour une meilleure rétroaction visuelle

L'événement window.onload assure que :

Tous les éléments de la page sont entièrement chargés avant d'exécuter le JavaScript
Empêche les erreurs qui pourraient se produire si les scripts sont exécutés avant que le DOM ne soit prêt
Fournit un moyen fiable d'initialiser la fonctionnalité de la page

Exemple d'interaction :

Lorsque la page est chargée, vous verrez un message "Page chargée!" en vert
La saisie changera les couleurs du texte et les messages de sortie
La pression d'une touche affichera des messages bleus
Le relâchement d'une touche affichera des messages verts

Tester et vérifier les interactions d'événements clavier

Dans cette étape finale, nous allons tester et vérifier les interactions d'événements clavier que nous avons implémentées tout au long du laboratoire. Nous allons explorer différents scénarios pour démontrer comment nos gestionnaires d'événements fonctionnent et comprendre leur comportement.

Ouvrez le fichier index.html dans l'IDE Web et assurez-vous d'avoir le script complet des étapes précédentes. Maintenant, testons diverses interactions clavier :

Interaction au chargement de la page
- Lorsque la page est chargée, vous devriez voir un message vert : "Page chargée! Commencez à taper dans le champ d'entrée."
Interactions lors de la pression d'une touche
- Tapez n'importe quelle touche dans le champ d'entrée
- Observez les changements suivants :
  - La couleur du texte change en rouge
  - Le message de sortie affiche la touche pressée et son code de touche
  - La couleur du message de sortie change en bleu
Interactions lors du relâchement d'une touche
- Relâchez la touche que vous avez pressée
- Observez les changements suivants :
  - La couleur du texte revient au noir
  - Le message de sortie affiche la touche relâchée et son code de touche
  - La couleur du message de sortie revient au vert

Exemples de scénarios d'interaction :

Scénario 1 : Taper "Bonjour"
- Première 'B' pressée : Le texte devient rouge, message de sortie bleu
- 'B' relâchée : Le texte devient noir, message de sortie vert
- Continuer pour chaque lettre...

Scénario 2 : Touches spéciales
- Essayez les flèches, la majuscule, le contrôle, etc.
- Observez comment différentes touches déclenchent des événements

Points clés d'apprentissage :

onkeydown : Est déclenché lorsqu'une touche est enfoncée
onkeyup : Est déclenché lorsqu'une touche est relâchée
window.onload : Assure que la page est entièrement chargée avant d'exécuter les scripts

Pour terminer le laboratoire :

Ouvrez le fichier HTML dans un navigateur web
Interagissez avec le champ d'entrée
Observez les changements de couleur et de message
Vérifiez que tous les gestionnaires d'événements fonctionnent comme prévu

Résumé

Dans ce laboratoire, les participants apprennent à gérer les événements clavier dans une page web en créant une interface HTML interactive avec des écouteurs d'événements JavaScript. Le laboratoire commence par la configuration d'un document HTML structuré présentant un élément d'entrée et un div de sortie, stylisés avec un CSS responsive pour fournir une interface utilisateur propre et centrée. Les participants exploreront des techniques de gestion d'événements clés telles que onkeydown et onkeyup, qui permettent une manipulation dynamique de la couleur du texte et un suivi en temps réel des événements.

Les objectifs d'apprentissage portent sur la compréhension des mécanismes d'événements du navigateur, l'implémentation d'écouteurs d'événements et la création d'interactions web responsives. En travaillant sur les étapes du laboratoire, les développeurs acquerront une expérience pratique dans la capture des entrées clavier, la modification dynamique d'éléments de page et l'implémentation de gestionnaires d'événements au niveau de la fenêtre, qui sont des compétences fondamentales pour créer des applications web interactives et attrayantes.