Comment mettre en œuvre un échange de <input type="text"> avec jQuery?

Question

<select> a cette api, qu'en est-il de <input> ?

Answer 1

@Pimvdb dit dans son commentaire,

Notez que le changement se déclenche uniquement lorsque l'élément d'entrée a perdu le focus. Il est également l'entrée de l'événement qui déclenche à chaque fois que la zone de texte mises à jour sans avoir besoin de perdre le focus. À la différence des principaux événements il travaille aussi pour l' collage/faites glisser le texte.

(Voir la documentation.)

C'est si utile, il vaut la peine de le mettre dans une réponse. A l'heure actuelle (v1.8*?) il n'est pas .input() commodité fn en jquery, donc la façon de le faire est

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

Answer 2

Vous pouvez utiliser``

Si ce n’est pas assez bon pour vous, vous pourriez utiliser certains des autres événements jQuery comme keyup et keydown, keypress - selon l’effet exact souhaité.

Answer 3

Je suggère d’utiliser l’événement keyup, quelque chose comme ci-dessous :

Il y a plusieurs façons d’arriver au même résultat, donc je suppose que c’est vers le bas de préférence et dépend de comment vous voulez qu’il fonctionne exactement.

Mise à jour : Cela ne fonctionne que pour la saisie manuelle, pas de copie et de pâte.

Pour copier et coller, je recommande ce qui suit :

Answer 4

Voici le code que j’utilise :

Cela fonctionne à merveille, surtout lorsque jumelé avec un contrôle. Vous pouvez simplement taper dans une vue de textbox et *immédiatement* les résultats dans votre .

Answer 5

Il n'y a qu'un seul moyen fiable pour ce faire, et c'est en tirant la valeur dans l'intervalle et en la comparant à une valeur mise en cache.

La raison pour laquelle c'est le seul moyen est parce qu'il y a de multiples façons de modifier un champ de saisie à l'aide de diverses entrées (clavier, souris, coller, l'historique du navigateur, voiceinput etc.) et vous ne pouvez pas détecter tous d'entre eux à l'aide de la norme des événements dans un cross-browser de l'environnement.

Heureusement, grâce à l'événement de l'infrastructure en jQuery, il est très facile d'ajouter votre propre inputchange événement. Je l'ai fait ici:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

Utiliser comme: $('input').on('inputchange', function() { console.log(this.value) });

Il y a une démo ici: http://jsfiddle.net/LGAWY/

Si vous avez peur de multiples intervalles, vous pouvez lier/délier de cet événement sur focus/blur.