Pourquoi l'événement onchange de ma zone de texte déclenche le flou - ne se déclenche-t-il pas par chaque caractère tapé?

Question

Pourquoi l'événement onchange de ma zone de texte se déclenche sur le flou, mais ne se déclenche pas par chaque caractère tapé?

Je veux obtenir le texte entier entré dans la zone de texte par chaque type par le clavier!

Mais onchang L'événement est uniquement déclenché sur le flou! Outre les événements onkeyup - onkeypress - onkeydown, les événements ne sont d'aucune aide car ces événements se déclenchent d'abord, puis le dernier caractère entré est appliqué à la zone de texte.

Quel événement dois-je utiliser ou comment puis-je faire cela?

Answer 1

vous voulez keyup, keydown, ou une combinaison d'entre eux. Au cours du gestionnaire de raccourci, vous pouvez obtenir la valeur avant-événement de la zone de texte. Au cours du gestionnaire de clés, vous pouvez obtenir la valeur après l'événement. Si vous obtenez une chaîne vide, vous faites quelque chose de mal.

edit: voici un exemple démontrant comment fonctionnent ces 2 événements. taper dans la première case met à jour les deux autres.

<table> 
    <tr> 
     <td>input</td> 
     <td><input type="text" id="textin" /></td> 
    </tr> 
    <tr> 
     <td>keydown</td> 
     <td><input type="text" id="keydownout" /></td> 
    </tr> 
    <tr> 
     <td>keyup</td> 
     <td><input type="text" id="keyupout" /></td> 
    </tr> 
</table> 
<script> 

    var readbox = document.getElementById('textin'); 
    var keydownbox = document.getElementById('keydownout'); 
    var keyupbox = document.getElementById('keyupout'); 

    function keydownhandler(e) { 
     keydownbox.value = readbox.value; 
    } 

    function keyuphandler(e) { 
     keyupbox.value = readbox.value; 
    } 

    readbox.addEventListener('keydown', keydownhandler, false); 
    readbox.addEventListener('keyup', keyuphandler, false); 

</script> 

(fonctionne dans firefox/chrome)

Answer 2

L'événement se déclenche de onkeyup après que vous avez saisi du texte:

onkeyup='alert(document.getElementById("myTextBox").value);'