jQuery 'input' événement

Je n'ai jamais entendu parler d'un événement en jQuery appelé input jusqu'j'ai vu ce jsfiddle.

Savez-vous pourquoi cela fonctionne? Est-il un alias pour keyup ou quelque chose?

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

C'est pas un alias de keyup. keyup ou keypress le feu sur n'importe quelle touche, y compris les flèches, tab, etc, qui ne sont pas nécessairement changer l'entrée. Le input événement ne se déclenche lorsque la valeur de l'entrée a changé.
developer.mozilla.org/en-US/docs/Web/Reference/Events/input
Sauf change ne se déclenche une fois le champ a perdu le focus. input se déclenche immédiatement.
Avez-vous essayé de chercher?
Oui, j'ai, sinon je n'aurais pas eu a créé une question pour cela. La seule chose qui vient sur Google sont des articles sur la input élément et comment fixer des événements.
Cette question magnifiquement répond à toutes les notions -stackoverflow.com/questions/15727324/...
J'aime la façon que lorsque vous google à cette question aujourd'hui, c'est la première raison qui vient à l' 🙂

InformationsquelleAutor silkfire | 2013-06-29

178

Se produit lorsque le contenu du texte d'un élément est modifié par le biais de l'interface utilisateur.

Ce n'est pas tout à fait un alias pour keyup parce que keyup le feu, même si la clé ne fait rien (par exemple: en appuyant puis en relâchant la touche de Contrôle déclenche une keyup événement).

Une bonne façon de penser, c'est comme cela: c'est un événement qui déclenche à chaque fois que l'entrée change. Cela comprend-mais n'est pas limité à: appuyez sur les touches pour modifier l'entrée (donc, par exemple, Ctrl par lui-même ne déclenche pas l'événement, mais Ctrl-V pour coller du texte), la sélection d'une auto-complétion option, Linux-style moyen-cliquez sur coller, glisser-déposer, et beaucoup d'autres choses.

Voir cette page et les commentaires sur cette réponse pour plus de détails.
- Savez-vous si jQuery rend l'manquant prise en charge du navigateur? (IE8, IE9 incohérences, etc)
- Je n'ai pas, malheureusement. Cependant, la rédaction de votre propre input équivalent ne serait pas terriblement difficile si jQuery n'est pas. Utilisez simplement keyup et filtrer les touches qui ne font rien. Certes, il y a un grand nombre de personnes, mais il est tout à fait possible de le faire.
- C'est brillant. À partir de maintenant, je n'ai pas besoin d'utiliser ces trois événements chaque fois que l'utilisateur tape quelque chose dans un champ de texte et je veux déclencher quelque chose. Merci pour le lien. Avez-vous les gars garder les signets de ce genre de choses? Comment trouvez-vous les articles pertinents si vite?
- Je viens de googlé 'js événement d'entrée'. Il y a un truc pour savoir quels termes utiliser pour trouver ce que vous voulez sur google, il vient avec l'expérience. Et puis, bien sûr, google enregistre tout, et l'utilise pour apprendre ce que vous voulez vraiment. La plupart de mes recherches sont pour l'API docs et les questions de programmation, de sorte qu'il a appris au fil du temps que lorsque je recherche des choses qu'elle devrait probablement montrez-moi les docs de l'API et de la programmation des réponses.
- Eh bien, j'étais à la recherche de "jQuery événement d'entrée", je n'avais aucune idée que c'était un original JS événement. Même ici, les premiers résultats sont généralement de SORTE, que je considère la plupart du temps comme de facto réponses/sources d'information officielles.
- Presque tous (ou toutes?) jQuery événements sont juste des wrappers pour JS événements. jQuery tout à fait de la gestion des événements beaucoup plus sain d'esprit (et permet même d'utiliser les événements de raw Objects!)
- input est en réalité plus qu'un filtrée keyup, par exemple, il sera également feu lorsque la valeur a été sélectionné à partir de la liste de déjà utilisé des valeurs... C'était quelque chose qui serait très difficile à gérer si il n'y avait pas input événement.
- Ah! Je n'avais aucune idée à ce sujet! Je vais l'ajouter à ma réponse.
- oninput aussi se déclenche lorsque le texte est modifié par la souris (glisser-déplacer, ou via le menu de clic droit ou clic milieu pour coller).
- bon à savoir! J'ai reformulé la réponse à préciser qu'il répond à beaucoup de choses en plus du clavier utilisation des touches.
- Cet événement 'input' ne fonctionne pas sur firefox, dans mon cas, firefox version 38
- Selon société il faut travailler dans FF 38. Êtes-vous sûr que votre code n'est pas cassé?
- Je suis absolument sûr. Le code est très simple, il suffit de le rattraper "l'entrée" de l'événement, puis déclencher d'alerte/de la console.journal, tout fonctionne sur google chrome, ie, mais rien ne se passe sur firefox.
- Smith, par le texte cité, événement d'entrée ne devrait pas le feu si il y a des changements dans le programme de saisie des éléments?
- Est-il un non-jquery façon de le faire dans ES2017 par exemple?
InformationsquelleAutor J David Smith
149

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

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

De sorte que vous pouvez l'utiliser de cette façon:
```
$(':input').on('input propertychange');
```
Pour avoir un plein crossbrowser soutien.

Depuis le propertychange peut être déclenché pour TOUT changement de propriété, par exemple, les personnes handicapées propriété est modifiée, alors vous voulez faire inclure cette:
```
$(':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 */
    }
});
```
- Exactement ce dont j'avais besoin. Je vous remercie. (Je déteste avoir à supporter de < IE9.)
- Quelques infos: "l'Opéra de ne pas mettre le feu à un événement d'entrée, après une baisse de texte dans un champ de saisie. IE 9 n'est pas le feu d'une entrée de l'événement lorsque l'utilisateur supprime les caractères de saisie remplie par le clavier, la coupe, ou des opérations de glisser." developer.mozilla.org/en-US/docs/Web/Events/...
- Il y a un problème avec ce code. Si maxlength est fixé sur l'élément d'entrée, l'entrée de l'événement est déclenché, même lorsque la longueur maximum est atteint et que la valeur n'est pas modifiée
- Mais pourquoi ne pas simplement deux fonctions distinctes? De cette façon, il n'y a pas besoin de vérifier le type d'événement ou un nom de propriété. Le code pourrait être dans une troisième fonction partagée.
InformationsquelleAutor claustrofob
11

À l'aide de jQuery, les éléments suivants sont identiques en vigueur:
```
$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });
```
Avec le input cas, cependant, seul le deuxième modèle semble fonctionner dans les navigateurs que j'ai testé.

Ainsi, vous attendez que cela fonctionne, mais il NE l'a PAS (au moins actuellement):
```
$(':text').input(function(){ doSomething(); });
```
De nouveau, si vous voulez tirer parti de l'événement délégation (par exemple, pour configurer l'événement sur le #container avant votre input.text est ajouté au DOM), ce qui devrait vous venir à l'esprit:
```
$('#container').on('input', ':text', function(){ doSomething(); });
```
Malheureusement, encore une fois, il NE fonctionne PAS actuellement!

Seulement ce modèle fonctionne:
```
$(':text').on('input', function(){ doSomething(); });
```
ÉDITÉ AVEC L'INFORMATION PLUS ACTUELLE

Je puis vous confirmer que ce modèle:
```
$('#container').on('input', ':text', function(){ doSomething(); });
```
FONCTIONNE MAINTENANT aussi, dans tous les "standards" des navigateurs.

InformationsquelleAutor Ifedi Okonkwo
2

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

Cependant, "La oninput événement est buggé dans Internet Explorer 9. Il n'est pas déclenché lorsque les caractères sont supprimés à partir d'un champ de texte par le biais de l'interface utilisateur uniquement lorsque les caractères sont insérés. Bien que la onpropertychange événement est pris en charge dans Internet Explorer 9, mais de même à la oninput événement, c'est aussi buggé, il n'est pas tiré sur la suppression.

Depuis les caractères peuvent être supprimés dans plusieurs façons (retour arrière et Supprimer des clés, CTRL + X, la Coupe et la commande 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 être détecté dans le JavaScript dans Internet Explorer 9."

J'ai de bons résultats de la liaison à la fois d'entrée et keyup (et keydown, si vous souhaitez un feu dans IE tout en maintenant enfoncée la touche retour arrière).

InformationsquelleAutor Zook
2

Être Prudent tout en utilisant l'ENTRÉE. Cet événement se déclenche sur l'objet et sur le flou dans IE 11. Mais il est déclenché sur le changement dans d'autres navigateurs.

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

InformationsquelleAutor Ananda Naphade
1

Je pense que 'input' fonctionne tout simplement ici de la même façon 'oninput" ne dans le DOM Niveau O Modèle d'Événement.

D'ailleurs:

Comme silkfire l'a mentionné, j'ai aussi cherché sur google 'jQuery événement d'entrée'. Ainsi, j'ai été amené ici et étonné d'apprendre que "l'entrée" est acceptable paramètre de jquery bind() de commande.
Dans jQuery en Action (p. 102, 2008 ed.) 'input' est pas mentionné comme un événement possible (contre 20 autres, de "flou" à "décharger"). Il est vrai que, sur p. 92, le contraire pourrait être évaluée à partir de la relecture (c'est à dire à partir d'une référence à des identificateurs de chaîne entre le Niveau 0 et le Niveau 2 modèles). C'est tout à fait trompeur.
- Merci pour l'entrée (aucun calembour prévu), ce qui semble être un thread officiel maintenant! 🙂
InformationsquelleAutor Brice Coustillas
0

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

Événements pourraient être quelqu'un de ceux qui sont 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 indique ce qui suit à propos de l'événement d'entrée:

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

InformationsquelleAutor Robert Rocha
-8
```
$("input#myId").bind('keyup', function (e) {    
    //Do Stuff
});
```
de travail dans IE et chrome
- bind est obsolète, utilisez on
InformationsquelleAutor Raj

Vous devez vous connecter pour publier un commentaire.