Événement 'input' jQuery

Je n'ai jamais entendu parler d'un événement dans jQuery appelé input avant d'avoir vu ce jsfiddle .

Savez-vous pourquoi ça marche? Est-ce un alias keyupou quelque chose?

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

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

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

Une bonne façon d'y penser est comme ceci: c'est un événement qui se déclenche chaque fois que l'entrée change. Cela inclut - sans s'y limiter - appuyer sur des touches qui modifient l'entrée (ainsi, par exemple, Ctrlne déclenchera pas l'événement en soi, mais Ctrl-Vpour coller du texte), sélectionner une option de complétion automatique, milieu de style Linux -cliquez sur coller, faites glisser et déposez, et plein d'autres choses.

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

oninput L'événement 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 IE ont leur propre événement propriétaire onpropertychangequi fait la même chose queoninput .

Vous pouvez donc l'utiliser de cette façon:

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

Pour avoir un support croisé complet.

Étant donné que le changement de propriété peut être déclenché pour TOUT changement de propriété, par exemple, la propriété désactivée est modifiée, vous devez 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) {
        /* Code goes here */
    }
});

En utilisant jQuery, les éléments suivants sont identiques en effet:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

Avec l' inputévénement, cependant, seul le deuxième modèle semble fonctionner dans les navigateurs que j'ai testés.

Ainsi, vous vous attendez à ce que cela fonctionne, mais cela NE FONCTIONNE PAS (au moins actuellement):

$(':text').input(function(){ doSomething(); });

Encore une fois, si vous vouliez tirer parti de la délégation d'événements (par exemple pour configurer l'événement #containeravant que votre ne input.textsoit ajouté au DOM), cela devrait vous venir à l'esprit:

$('#container').on('input', ':text', function(){ doSomething(); });

Malheureusement, encore une fois, cela ne fonctionne PAS actuellement!

Seul ce modèle fonctionne:

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

MODIFIÉ AVEC PLUS D'INFORMATIONS ACTUELLES

Je peux certainement confirmer que ce modèle:

$('#container').on('input', ':text', function(){ doSomething(); });

FONCTIONNE MAINTENANT également, dans tous les navigateurs «standard».

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

Toutefois , «L'événement oninput est bogué dans Internet Explorer 9. Il n'est pas déclenché lorsque les caractères sont supprimés d'un champ de texte via l'interface utilisateur uniquement lorsque des caractères sont insérés. Bien que l'événement onpropertychange soit pris en charge dans Internet Explorer 9, mais de manière similaire à la événement oninput, il est également buggé, 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 Retour arrière et Supprimer, CTRL + X, commande Couper et Supprimer dans le menu contextuel), il n'y a pas de bonne solution pour détecter toutes les modifications. Si des caractères sont supprimés par la commande Supprimer du menu contextuel, la modification ne peut pas être détectée dans JavaScript dans Internet Explorer 9. "

J'ai de bons résultats qui se lient à la fois à l'entrée et à la touche (et à la touche, si vous voulez qu'il se déclenche dans IE tout en maintenant la touche Retour arrière).

Soyez prudent lorsque vous utilisez INPUT. Cet événement se déclenche sur le focus et sur le flou dans IE 11. Mais il est déclenché lors d'un changement dans d'autres navigateurs.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Je pense que «entrée» fonctionne simplement ici de la même manière que «oninput» dans le modèle d'événement DOM niveau O.

Incidemment:

Tout comme Silkfire l'a commenté, moi aussi, j'ai recherché «l'événement d'entrée jQuery» sur Google. J'ai donc été amené ici et étonné d'apprendre que «entrée» est un paramètre acceptable pour la commande bind () de jquery . Dans jQuery in Action (p. 102, 2008 ed.), 'Input' n'est pas mentionné comme un événement possible (contre 20 autres, de 'blur' à 'unload'). Il est vrai qu'à la p. 92, le contraire pourrait être supposé à partir d'une relecture (c'est-à-dire d'une référence à différents identifiants de chaîne entre les modèles de niveau 0 et de niveau 2). C'est assez trompeur.

jQuery a la signature suivante pour la .on()méthode:.on( events [, selector ] [, data ], handler )

Les événements peuvent être n'importe lequel de ceux répertoriés sur cette référence:

https://developer.mozilla.org/en-US/docs/Web/Events

Cependant, ils ne sont pas tous pris en charge par tous les navigateurs.

Mozilla déclare ce qui suit à propos de l'événement d'entrée:

L'événement d'entrée DOM est déclenché de manière synchrone lorsque la valeur d'un élément ou est modifiée. En outre, il se déclenche sur les éditeurs modifiables lorsque son contenu est modifié.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

travaillant à la fois dans IE et dans le chrome