20 août 2021

Les événements: change, input, cut, copy, paste

Découvrons différents événements qui accompagnent les mises à jour des données.

Événement: change

L’événement change se déclenche lorsque le changement de la valeur de l’élément a fini de se réaliser.

Pour les éléments input de type text cela signifie que l’événement se produit lorsqu’ils perdent le focus.

Par exemple, pendant que nous saisissons dans le champ de texte ci-dessous – il n’y a aucun événement. Mais lorsque nous déplaçons le focus ailleurs, par exemple, en cliquant sur un bouton – il y aura un événement change:

<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">

Pour les autres éléments: select, input type=checkbox/radio il se déclenche juste après les changements de sélection:

<select onchange="alert(this.value)">
  <option value="">Select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Événement: input

L’événement input se déclenche à chaque fois qu’une valeur est modifiée par l’utilisateur.

Contrairement aux événements liés au clavier, il se déclenche sur toute modification de valeur, même celles qui n’impliquent pas d’actions du clavier: coller avec une souris ou utiliser la reconnaissance vocale pour dicter le texte.

Par exemple:

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

Si nous voulons gérer chaque modification d’un <input> alors cet événement est le meilleur choix.

D’un autre coté, l’événement input ne se déclenche pas lors de la saisie au clavier et d’autres actions qui n’impliquent de changement de valeur, par ex. en appuyant sur les touches fléchées touche:⇦ touche:⇨ pendant la saisie.

smart header="Can't prevent anything in `oninput`"
L'événement `input` se produit après la modification de la valeur.

Nous ne pouvons donc pas utiliser `event.preventDefault()` - c'est trop tard, il n'y aurait aucun effet.

Événements: cut, copy, paste

Ces événements se produisent lors de la coupe/copie/collage d’une valeur.

Ils appartiennent à la classe ClipboardEvent et permettent d’accéder aux données copiées/collées.

Nous pouvons également utiliser event.preventDefault() pour interrompre l’action, puis rien n’est copié/collé.

Par exemple, le code ci-dessous empêche tous ces événements et montre ce que nous essayons de couper/copier/coller:

<input type="text" id="input">
<script>
  input.oncut = input.oncopy = input.onpaste = function(event) {
    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
    return false;
  };
</script>

Veuillez noter qu’il est possible de copier/coller non seulement du texte, mais tout. Par exemple, nous pouvons copier un fichier dans le gestionnaire de fichiers du système d’exploitation et le coller.

C’est parce que clipboardData implémente l’interface DataTransfer, couramment utilisée pour glisser-déposer et copier/coller. C’est un peu au-delà de notre portée maintenant, mais vous pouvez trouver ses méthodes dans la specification.

ClipboardAPI: restrictions de sécurité des utilisateurs

Le presse-papiers est une chose “globale” au niveau du système d’exploitation. Ainsi, la plupart des navigateurs autorisent l’accès en lecture/écriture au presse-papiers uniquement dans le cadre de certaines actions de l’utilisateur pour la sécurité, par ex. dans les gestionnaires d’événements onclick.

Il est également interdit de générer des événements de presse-papiers “personnalisés” avec dispatchEvent dans tous les navigateurs sauf Firefox.

Récapitulatif

Événements de changement de données:

Événement Description Specials
change Une valeur a été modifiée Se déclenche à la perte du focus pour les champs textes.
input Pour les champs textes à chaque modification. Se déclenche immédiatement contrairement à change.
cut/copy/paste Les actions couper/copier/coller. L’action peut être empêchée. La propiété event.clipboardData donne un accès en lecture/écriture au presse-papiers.

Exercices

importance: 5

Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time.

Here’s the demo:

Any input change should be processed immediately.

The formula is:

// initial: the initial money sum
// interest: e.g. 0.05 means 5% per year
// years: how many years to wait
let result = Math.round(initial * (1 + interest) ** years);

Open a sandbox for the task.

Carte du tutoriel

Commentaires

lire ceci avant de commenter…
  • Si vous avez des améliorations à suggérer, merci de soumettre une issue GitHub ou une pull request au lieu de commenter.
  • Si vous ne comprenez pas quelque chose dans l'article, merci de préciser.
  • Pour insérer quelques bouts de code, utilisez la balise <code>, pour plusieurs lignes – enveloppez-les avec la balise <pre>, pour plus de 10 lignes - utilisez une sandbox (plnkr, jsbin, codepen…)