Meilleur moyen de suivre les changements de type "as-you-type" dans l'entrée type="text" ?

Question

D'après mon expérience, input type="text" onchange L'événement ne se produit généralement qu'après votre départ ( blur ) le contrôle.

Y a-t-il un moyen de forcer le navigateur à déclencher onchange à chaque fois textfield des changements de contenu ? Si ce n'est pas le cas, quel est le moyen le plus élégant d'en assurer le suivi "manuellement" ?

Utilisation de onkey* n'est pas fiable, car vous pouvez cliquer avec le bouton droit de la souris sur le champ et choisir Coller, ce qui modifiera le champ sans aucune saisie au clavier.

Es setTimeout le seul moyen Moche :-)

Answer 1

Mise à jour :

Voir Une autre réponse (2015).

---

Réponse originale de 2009 :

Donc, vous voulez le onchange événement à déclencher en cas d'appui sur la touche, flou, y de la pâte ? C'est de la magie.

Si vous voulez suivre les changements au fur et à mesure qu'ils sont saisis, utilisez "onkeydown" . Si vous avez besoin de piéger les opérations de collage avec la souris, utilisez la fonction "onpaste" ( IE , FF3 ) et "oninput" ( FF, Opera, Chrome, Safari 1 ).

1 _{Brisé pour <code><textarea></code> sur Safari. Utilisez <a href="http://help.dottoro.com/ljhiwalm.php" rel="noreferrer"><code>textInput</code></a> au lieu de}

Answer 2

Javascript est imprévisible et drôle ici.

• onchange ne se produit que lorsque vous brouillez la zone de texte
• onkeyup & onkeypress ne se produit pas toujours lors d'un changement de texte
• onkeydown se produit lors d'un changement de texte (mais ne peut pas suivre le couper/coller avec un clic de souris)
• onpaste & oncut se produit avec la pression du clavier et même avec le clic droit de la souris.

Donc, pour suivre le changement dans la zone de texte, nous avons besoin de onkeydown , oncut y onpaste . Dans le rappel de ces événements, si vous vérifiez la valeur de la zone de texte, vous n'obtenez pas la valeur mise à jour car la valeur est modifiée après le rappel. Une solution pour cela est de définir une fonction de temporisation avec un délai de 50 mili-secondes (ou peut-être moins) pour suivre le changement.

C'est un sale coup mais c'est le seul moyen, comme je l'ai recherché.

Voici un exemple. http://jsfiddle.net/2BfGC/12/

Answer 3

onkeyup se produit après que vous ayez tapé, par exemple, j'appuie sur t lorsque je lève le doigt, l'action se produit mais sur keydown l'action se déroule avant que je ne numérise le personnage t

J'espère que cela sera utile à quelqu'un.

Así que onkeyup est plus approprié lorsque vous voulez envoyer ce que vous venez de taper maintenant.

Answer 4

J'avais une exigence similaire (champ de texte de style twitter). J'ai utilisé onkeyup y onchange . onchange s'occupe en fait des opérations de collage de la souris pendant la perte du focus du champ.

[Mise à jour] En HTML5 ou plus, utilisez oninput pour obtenir des mises à jour en temps réel de la modification des personnages, comme expliqué dans d'autres réponses ci-dessus.

Answer 5

Si vous utilisez UNIQUEMENT Internet Explorer, vous pouvez l'utiliser :

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

J'espère que cela vous aidera.