web-dev-qa-db-fra.com

evénement de changement javascript sur l'élément d'entrée déclenche uniquement lorsque le focus est perdu

J'ai un élément d'entrée et je veux continuer à vérifier la longueur du contenu et chaque fois que la longueur devient égale à une taille particulière, je veux activer le bouton d'envoi, mais je suis confronté à un problème avec l'événement onchange de javascript en tant qu'événement se déclenche uniquement lorsque l'élément d'entrée sort de la portée et non lorsque le contenu change.

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange ne se déclenche pas lors de la modification du contenu du nom, mais uniquement lorsque le nom devient flou.

Est-ce que je peux faire quelque chose pour que cet événement fonctionne avec un changement de contenu? ou un autre événement que je peux utiliser pour cela? J'ai trouvé une solution de contournement en utilisant la fonction onkeyup, mais cela ne se déclenche pas lorsque nous sélectionnons du contenu dans le compléteur automatique du navigateur.

Je veux quelque chose qui puisse fonctionner lorsque le contenu du champ change, que ce soit au clavier ou à la souris ... des idées?

javascriptjqueryjavascript-events
69
Sachin Midha
(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

Cela intercepte change, frappes, paste, textInput, input (si disponible). Et ne tirez pas plus que nécessaire.

http://jsfiddle.net/katspaugh/xqeDj/

Références:

textInput - un type d'événement W3C DOM niveau 3. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Un agent d'utilisateur doit envoyer cet événement lorsqu'un ou plusieurs caractères ont été entré. Ces caractères peuvent provenir d’une variété de les sources, par exemple, les caractères résultant d’une touche enfoncée ou publié sur un clavier, à partir du traitement d’une méthode de saisie éditeur, ou résultant d'une commande vocale. Où une opération "coller" génère une simple séquence de caractères, c’est-à-dire un passage de texte sans informations de structure ou de style, ce type d'événement doit être généré aussi bien.

input - un HTML5 type d'événement.

Tiré sur les contrôles lorsque l'utilisateur modifie la valeur

Firefox, Chrome, IE9 et d’autres navigateurs modernes le supportent.

Cet événement se produit immédiatement après la modification, contrairement à l'événement onchange, qui se produit lorsque l'élément perd le focus.

103
katspaugh

En tant qu'extension de la réponse katspaugh, voici un moyen de le faire pour plusieurs éléments à l'aide d'une classe css.

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });
9
SSZero

Faites-le à la manière de jQuery:

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});
2
powtac

Voici une autre solution que je développe pour le même problème. Cependant, comme j'utilise beaucoup de zones de saisie, je conserve l'ancienne valeur en tant qu'attribut défini par l'utilisateur des éléments eux-mêmes: "data-value". Avec jQuery, il est si facile à gérer.

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

voila, j’ai utilisé 5 à 6 cases d’entrée ayant la classe 'filterBox', Je fais fonctionner la méthode filterBy uniquement si data-value est différente de sa propre valeur.

0
efirat

Vous pouvez utiliser onkeyup

<input id="name" onkeyup="checkLength(this.value)" />
0
Dogbert

Il m'a fallu 30 minutes pour le trouver, mais cela fonctionne en juin 2019.

<input type="text" id="myInput" oninput="myFunction()">

et si vous voulez ajouter un écouteur d'événement par programmation en js

inputElement.addEventListener("input", event => {})
0
franmcod

Vous devrez utiliser une combinaison de onkeyup et onclick (ou onmouseup) si vous voulez saisir toutes les possibilités.

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />
0
DaveRandom