Événements JavaScript change, input, cut, copy, paste

Comprendre et implémenter la gestion des événements JavaScript est essentiel pour créer des applications web dynamiques et conviviales. Cet article se concentre sur les événements clés associés aux champs de formulaire et aux interactions utilisateur : change, input, cut, copy et paste. En maîtrisant ces événements, vous pouvez améliorer l'expérience de saisie de données et fournir un retour immédiat dans les formulaires web.

Cette page explique ce que fait chaque événement, quand il se déclenche exactement, en quoi change et input diffèrent, et comment lire et contrôler les données du presse-papiers — avec des exemples exécutables pour chacun.

change vs input en un coup d'œil

Les deux événements liés au texte sont faciles à confondre. Ils diffèrent par le moment où ils se déclenchent :

En résumé : input correspond à « pendant la frappe » ; change correspond à « lorsque vous avez terminé. »

Utiliser l'événement change

L'événement change est déclenché lorsque la valeur d'un élément <input> ou <textarea> est modifiée et que l'élément perd ensuite le focus (blur). Pour un élément <select>, une case à cocher ou un bouton radio, il se déclenche immédiatement lorsque la sélection ou l'état coché change, car ces éléments n'ont pas d'état de saisie intermédiaire à valider. Cet événement est idéal pour effectuer une validation ou d'autres actions une fois la saisie de l'utilisateur finalisée.

Exemple : surveiller les changements d'un select

<select id="colorSelector">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
<script>
  document.getElementById('colorSelector').addEventListener('change', function(event) {
    alert('You selected ' + event.target.value);
  });
</script>

Ce code affiche une alerte immédiate à l'utilisateur lors de la sélection, indiquant la couleur choisie.

Exploiter l'événement input

Contrairement à l'événement change, qui se déclenche généralement lorsqu'un champ texte perd le focus, l'événement input se déclenche immédiatement à chaque frappe ou modification de valeur, offrant un retour en temps réel. Cela est particulièrement utile pour valider la saisie au fur et à mesure, comme vérifier la robustesse d'un mot de passe ou afficher un compteur de caractères en direct.

L'événement input se déclenche également pour les éléments contenteditable et pour les modifications qui ne proviennent pas du clavier — collage, glisser-déposer, remplissage automatique ou saisie vocale. Si vous devez inspecter ou annuler une modification avant qu'elle soit appliquée au DOM, écoutez plutôt l'événement beforeinput associé, dont event.inputType (par exemple "insertText" ou "deleteContentBackward") indique le type de modification sur le point de se produire.

Exemple : validation dynamique de la saisie

<input type="password" id="passwordInput" placeholder="Enter your password">
<div id="passwordStrength"></div>
<script>
  document.getElementById('passwordInput').addEventListener('input', function(event) {
    var strength = event.target.value.length;
    var strengthMessage = 'Weak';
    if(strength > 5) strengthMessage = 'Moderate';
    if(strength > 10) strengthMessage = 'Strong';
    document.getElementById('passwordStrength').textContent = 'Strength: ' + strengthMessage;
  });
</script>

Ce script met à jour l'indicateur de robustesse au fur et à mesure que l'utilisateur tape son mot de passe.

Gérer les événements cut, copy et paste

Les événements cut, copy et paste permettent aux développeurs d'interagir avec le presse-papiers, ce qui peut être essentiel pour les applications nécessitant une gestion avancée du presse-papiers. Notez que event.clipboardData est largement pris en charge par les navigateurs, tandis que navigator.clipboard nécessite un contexte sécurisé (HTTPS) et est pris en charge dans tous les navigateurs modernes. Pour la compatibilité avec les anciens navigateurs, utilisez event.clipboardData ou le legacy document.execCommand('copy').

Exemple : interaction avec le presse-papiers

<input type="text" id="clipboardInput" value="Copy this text">
<button id="copyBtn">Copy</button>
<script>
  document.getElementById('copyBtn').addEventListener('click', async function() {
    try {
      await navigator.clipboard.writeText(document.getElementById('clipboardInput').value);
      alert('Text copied!');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  });

  document.getElementById('clipboardInput').addEventListener('paste', function(event) {
    event.preventDefault();
    alert('Pasting blocked. Pasted content: ' + event.clipboardData.getData('text'));
  });

  document.getElementById('clipboardInput').addEventListener('cut', function(event) {
    event.preventDefault();
    alert('Cutting blocked. Cut content: ' + event.clipboardData.getData('text'));
  });
</script>

Ce code fournit une fonctionnalité pour copier du texte avec un bouton, montre comment intercepter et bloquer les actions du presse-papiers à l'aide de event.preventDefault(), et gère l'événement cut pour améliorer l'interactivité de la page web.

Lire et réécrire le contenu collé

Un besoin courant dans la pratique n'est pas de bloquer un collage, mais de le nettoyer — par exemple supprimer la mise en forme ou les sauts de ligne avant que le texte n'arrive dans un champ. Appelez event.preventDefault() pour annuler le collage par défaut, lisez le texte brut avec event.clipboardData.getData('text'), transformez-le, puis insérez vous-même la valeur nettoyée :

const input = document.getElementById('clean-paste');

input.addEventListener('paste', (event) => {
  event.preventDefault();
  const pasted = event.clipboardData.getData('text');
  // Collapse whitespace/newlines into single spaces
  const cleaned = pasted.replace(/\s+/g, ' ').trim();
  input.value = cleaned;
});

clipboardData.getData('text') retourne le contenu en texte brut ; vous pouvez également demander 'text/html' pour du contenu enrichi. Étant donné que les gestionnaires cut, copy et paste reçoivent un ClipboardEvent, ils exposent clipboardData de manière synchrone — contrairement à l'API asynchrone basée sur les Promises navigator.clipboard utilisée dans le bouton de copie ci-dessus.

Conclusion

Implémenter des événements JavaScript comme change, input, cut, copy et paste améliore non seulement l'interactivité des pages web, mais offre également aux utilisateurs un retour immédiat et une expérience plus engageante. Utilisez input lorsque vous avez besoin d'un comportement en direct, frappe par frappe ; utilisez change lorsque seule la valeur validée vous intéresse ; et utilisez les événements du presse-papiers lorsque vous devez lire, nettoyer ou contrôler le copier/coller. Combinez-les judicieusement et vos formulaires paraîtront réactifs sans submerger les utilisateurs avec des messages de validation prématurés.

Voir aussi

• Introduction aux événements du navigateur — comment les événements sont ajoutés et distribués.
• Propriétés et méthodes des formulaires — lire et écrire les valeurs de formulaire.
• Événements de formulaire : submit — gérer le moment où un formulaire est envoyé.
• Focus : focus/blur — les changements de focus qui déclenchent change.
• Clavier : keydown et keyup — événements de touche de bas niveau.

Pratique