Quelles sont les différences entre les événements « input » et « change » pour les éléments d'entrée ?

Événements de saisie ou de modification pour les éléments de saisie

L'élément de saisie en HTML permet aux utilisateurs de saisir et de modifier du texte. Il prend en charge deux gestionnaires d'événements : change et input. Les deux événements sont déclenchés lorsque le contenu textuel de l'élément est modifié, mais ils présentent des différences subtiles dans leur comportement.

Événement 'input'

L'événement d'entrée se produit à chaque fois toute modification est apportée au contenu textuel de l'élément, notamment :

• Saisir un caractère
• Supprimer un caractère
• Sélectionner du texte
• Coller du texte

Il est généralement utilisé pour valider les données d'entrée à la volée et fournir un retour immédiat à l'utilisateur.

Événement « changement »

L'événement L'événement de changement se produit lorsque l'élément perd le focus après qu'une modification a été apportée au contenu du texte. En d'autres termes, l'utilisateur doit à la fois modifier le texte et éloigner le focus de l'élément avant que l'événement de changement ne soit déclenché.

En plus de perdre le focus, l'événement de changement peut également être déclenché par :

• Appuyer sur la touche Entrée
• Sélectionner une option dans une liste déroulante
• Modifier l'état coché d'une case à cocher

Utilisation dans jQuery

Vous pouvez attacher des écouteurs d'événements aux éléments d'entrée à l'aide de jQuery comme suit :

$('input[type="text"]').on('change', function() {
    alert($(this).val());
});

// Equivalent to using 'input' instead of 'change'
$('input[type="text"]').on('input', function() {
    alert($(this).val());
});

Ordre des événements

Lorsque la saisie et la modification sont effectuées les événements sont attachés au même élément, ils seront déclenchés dans l'ordre suivant :

1. On Input: Triggered every time the text content changes
2. On Change: Triggered when the element loses focus after the text content changes

Ce comportement vous permet de gérer les changements immédiats avec l'événement d'entrée et d'effectuer des actions lorsque l'élément perd le focus avec l'événement de changement .

Exemple

L'exemple suivant montre la différence entre les événements de saisie et de modification :

$("input, select").on("input", function () {
    console.log("On input: " + this.tagName + " | " + this.value);
}).on("change", function () {
    console.log("On change: " + this.tagName + " | " + this.value);
});

Lors de la saisie d'un texte ou de la sélection d'un dans une liste déroulante, vous verrez le résultat suivant :

On input: INPUT | ...
On change: INPUT | ...

Remarquez que la saisie est déclenchée à chaque frappe ou changement de caractère, tandis que le changement n'est déclenché qu'une fois le focus perdu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!