Détection de "valeur" du champ de texte de saisie après un événement de type "keydown" dans le champ de texte?

Question

Donc, mon site a une boîte de saisie, qui a un événement onkeydown qui alerte simplement la valeur de la boîte d'entrée.

Malheureusement, la valeur de l'entrée n'inclut pas les changements dus à la pression sur la touche.

Par exemple, pour cette boîte d'entrée:

<input onkeydown="alert(this.value)" type="text" value="cow" /> 

La valeur par défaut est "vache". Lorsque vous appuyez sur la touche "s" dans l'entrée, vous recevez une alerte ("vache") au lieu d'une alerte ("vaches"). Comment puis-je le rendre alerte ("vaches") sans utiliser onkeyup? Je ne veux pas utiliser onkeyup car il me semble moins réactif. Une solution partielle consiste à détecter la touche enfoncée et à l'ajouter à la valeur de l'entrée, mais cela ne fonctionne pas dans tous les cas, par exemple si le texte de l'entrée est mis en surbrillance et que vous appuyez sur une touche.

Quelqu'un at-il une solution complète à ce problème?

Merci

Answer 1

Le gestionnaire d'événements ne voit que le contenu avant que la modification ne soit appliquée, car les événements mousedown et input vous permettent de bloquer l'événement avant qu'il ne parvienne au champ.

Vous pouvez contourner cette limitation en donnant au navigateur une chance de mettre à jour le contenu du champ avant d'en saisir la valeur - le plus simple est d'utiliser un petit délai avant de vérifier la valeur.

Un exemple est minime:

<input id="e" 
    onkeydown="window.setTimeout(function(){ alert(e.value) }, 1)" 
    type="text" value="cow" /> 

Ceci définit un délai d'attente 1ms qui devrait se produire après la pression de touche et les gestionnaires keydown ont laissé le contrôle changer sa valeur. Si votre moniteur est rafraichissant à 60 images par seconde, vous disposez de 16 ms de marge de manœuvre avant de perdre 2 images.

---

Un exemple plus complet (qui ne repose pas sur named access on the Window object ressemblerait à ceci:

var e = document.getElementById('e'); 
 
var out = document.getElementById('out'); 
 

 
e.addEventListener('input', function(event) { 
 
    window.setTimeout(function() { 
 
    out.value = event.target.value; 
 
    }, 1); 
 
});

<input type="text" id="e" value="cow"> 
 
<input type="text" id="out" readonly>

Lorsque vous exécutez l'extrait ci-dessus, essayez certains des éléments suivants:

• Placez le curseur au début et tapez
• Coller un contenu au milieu de la zone de texte
• Sélectionnez un tas de texte et tapez le remplacer

Answer 2

événements KeyUp/bas sont gérées différemment dans les différents navigateurs. La solution simple est d'utiliser une bibliothèque comme mootools, qui va les faire se comporter de la même manière, gérer la propagation et le bouillonnement, et vous donner un "ceci" standard dans le rappel.

Answer 3

A ma connaissance, vous ne pouvez pas le faire avec un contrôle d'entrée standard, sauf si vous roulez votre posséder.

Answer 4

Ici vous avez par exemple avec l'explication: http://jsbin.com/awopus/4/edit

Answer 5

Notez que dans les navigateurs plus récents, vous serez en mesure d'utiliser le nouvel événement « d'entrée » HTML5 (https://developer.mozilla.org/en-US/docs/DOM/window.oninput) pour cela. La plupart des navigateurs non IE supportent cet événement depuis longtemps (voir le tableau de compatibilité dans le lien); pour IE c'est la version>/9 seulement malheureusement.

Answer 6

Veuillez essayer d'utiliser l'événement oninput. Contrairement à onkeydown, onkeypress événements cet événement met à jour la propriété value du contrôle.

<input id="txt1" value="cow" oninput="alert(this.value);" /> 

Answer 7

Jquery est la méthode optimale pour ce faire. Veuillez faire référence à ce qui suit:

let fieldText = $('#id'); 
let fieldVal = fieldText.val(); 

fieldText.on('keydown', function() { 
    fieldVal.val(); 
});