JQuery événement 'input'

Question

Je n'ai jamais entendu parler d'un événement en jQuery appelé input jusqu'à ce que je voie ce jsfiddle.

Savez-vous pourquoi ça marche? Est-ce un alias pour keyup ou quelque chose?

$(document).on('input', 'input:text', function() {});

Answer 1

Se produit lorsque le contenu textuel d'un élément est modifié via l'interface utilisateur.

Ce n'est pas tout à fait un alias pour keyup car keyup se déclenche même si la touche ne fait rien (par exemple : appuyer puis relâcher la touche Contrôle déclenchera un événement keyup).

Une bonne façon de le comprendre est la suivante : c'est un événement qui se déclenche à chaque fois que l'entrée change. Cela inclut -- mais ne se limite pas à -- appuyer sur des touches qui modifient l'entrée (donc, par exemple, Ctrl seul ne déclenchera pas l'événement, mais Ctrl-V pour coller du texte le fera), sélectionner une option d'auto-complétion, coller en mode Linux avec le clic du milieu, le glisser-déposer, et plein d'autres choses.

Voir cette page et les commentaires sur cette réponse pour plus de détails.

Answer 2

L'événement oninput est très utile pour suivre les modifications des champs de saisie.

Cependant, il n'est pas pris en charge dans la version IE < 9. Mais les anciennes versions d'IE ont leur propre événement propriétaire onpropertychange qui fait la même chose que oninput.

Vous pouvez donc l'utiliser de cette manière :

$(':input').on('input propertychange');

Pour bénéficier d'un support complet de la compatibilité entre navigateurs.

Étant donné que le propertychange peut être déclenché pour N'IMPORTE QUEL changement de propriété, par exemple, si la propriété désactivée est modifiée, alors vous voudrez inclure ceci :

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Le code va ici */
    }
});

Answer 3

Comme l'a dit claustrofob, oninput est pris en charge pour IE9+.

Cependant, "L'événement oninput est bogué dans Internet Explorer 9. Il n'est pas déclenché lorsque des caractères sont supprimés d'un champ de texte via l'interface utilisateur uniquement lors de l'insertion de caractères. Bien que l'événement onpropertychange soit pris en charge dans Internet Explorer 9, mais de la même manière que l'événement oninput, il est également bogué, il n'est pas déclenché lors de la suppression.

Étant donné que les caractères peuvent être supprimés de plusieurs façons (touches de retour arrière et de suppression, CTRL + X, commande Couper et Supprimer dans le menu contextuel), il n'y a pas de bonne solution pour détecter tous les changements. Si les caractères sont supprimés par la commande Supprimer du menu contextuel, la modification ne peut pas être détectée en JavaScript dans Internet Explorer 9."

J'obtiens de bons résultats en liant à la fois input et keyup (et keydown, si vous voulez qu'il se déclenche dans IE tout en maintenant enfoncée la touche de retour arrière).

Answer 4

Je pense que 'input' fonctionne simplement ici de la même manière que 'oninput' le fait dans le modèle d'événement DOM Niveau O.

Soit dit en passant:

Tout comme silkfire l'a commenté, j'ai également cherché sur Google 'événement d'entrée jQuery'. Ainsi j'ai été conduit ici et stupéfait d'apprendre que 'input' est un paramètre acceptable pour la commande bind() de jQuery. Dans jQuery in Action (p. 102, éd. 2008) 'input' n'est pas mentionné comme un événement possible (contre 20 autres, de 'blur' à 'unload'). Il est vrai que, à la page 92, le contraire pourrait être supposé en le relisant (c'est-à-dire à partir d'une référence à des identifiants de chaîne différents entre les modèles de Niveau 0 et Niveau 2). C'est assez trompeur.

Answer 5

$("input#myId").bind('keyup', function (e) {    
    // Faire des trucs
});

fonctionnant à la fois dans IE et Chrome