web-dev-qa-db-fra.com

événement jQuery 'input'

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

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

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

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 parce que keyup se déclenchera même si la clé ne fait rien (par exemple: appuyer puis relâcher la touche Ctrl déclenchera un événement keyup.).

Voici un bon moyen d’y réfléchir: c’est un événement qui se déclenche lorsque l’entrée change. Ceci inclut, sans toutefois s'y limiter, les touches qui modifient l'entrée (ainsi, par exemple, Ctrl ne déclenchera pas l'événement en soi, mais Ctrl-V pour coller du texte sera sélectionné), en sélectionnant une option d'auto-complétion, coller, glisser-déposer, style Linux, et bien d'autres choses.

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

178
J David Smith

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 IE version <9. Toutefois, les versions antérieures IE ont leur propre événement propriétaire onpropertychange qui fait la même chose que oninput.

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

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

Avoir un support complet pour crossbrowser.

Etant 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 souhaitez inclure les éléments suivants:

$(':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 */
    }
});
150
claustrofob

Avec jQuery, les effets suivants sont identiques:

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

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

Ainsi, vous vous attendriez à ce que cela fonctionne, mais cela NE FONCTIONNE PAS (du moins à l'heure actuelle):

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

Encore une fois, si vous souhaitiez tirer parti de la délégation d’événement (par exemple, pour configurer l’événement sur le #container avant que votre input.text ne soit ajouté au DOM), pensez-vous bien:

$('#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(); });

édité avec plus d'informations actuelles

Je peux certainement confirmer que ce modèle:

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

NOW WORKS également, dans tous les navigateurs "standard".

12
Ifedi Okonkwo

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

Cependant , "L'événement oninput est erroné 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 lorsque des caractères sont insérés. 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é à la suppression.

Étant donné que les caractères peuvent être supprimés de plusieurs manières (touches Retour arrière et Suppr, CTRL + X, commande Couper et Supprimer dans le menu contextuel), il n’existe aucune solution efficace pour détecter toutes les modifications. Si des caractères sont supprimés à l'aide de la commande Supprimer du menu contextuel, la modification ne peut pas être détectée en JavaScript dans Internet Explorer 9. "

J'ai de bons résultats liant à la fois l'entrée et la touche de raccourci (et la touche de raccourci, si vous voulez qu'elle se déclenche dans IE tout en maintenant la touche Backspace enfoncée).

2
Zook

Soyez prudent lorsque vous utilisez INPUT. Cet événement se déclenche sur la mise au point et sur le flou dans IE 11. Mais il est déclenché par des modifications dans les autres navigateurs.

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

2
Ananda Naphade

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

Incidemment:

De la même manière que silkfire l'a commenté, j'ai aussi cherché Google pour "jQuery input event". Ainsi, j’ai été amené ici et étonné 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 "flou" à "décharger"). C'est vrai que, à la p. 92, on pourrait supposer le contraire d’une relecture (c’est-à-dire d’une référence à différents identificateurs de chaîne entre les modèles de niveau 0 et de niveau 2). C'est assez trompeur.

1
Brice Coustillas

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

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

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

Bien qu'ils ne soient pas tous supportés 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 d'un élément est modifiée. En outre, il se déclenche sur les éditeurs contenteditable lorsque son contenu est modifié.

0
Robert Rocha