Detecting « valeur » du champ de texte d'entrée après un événement keydown dans le champ de texte?

voix
16

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

Malheureusement, la valeur de l'entrée ne comprend pas les changements dus à la touche enfoncée.

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 obtenez une alerte ( « vache ») au lieu d'une alerte ( « vaches »). Comment puis - je faire alert ( « vaches ») sans utiliser onkeyup ? Je ne veux pas utiliser onkeyup parce qu'il se sent moins sensible.

Une solution partielle est de détecter la touche enfoncée, puis l'ajouter à la valeur de l'entrée, mais cela ne fonctionne pas dans tous les cas, comme si vous avez le texte dans l'entrée en surbrillance, puis vous appuyez sur une touche.

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

Merci

Créé 27/08/2009 à 02:55
source utilisateur
Dans d'autres langues...                            


7 réponses

voix
16

Le gestionnaire d'événements ne voit le contenu avant que le changement est appliqué, parce que le mousedownet les inputévénements vous donnent une chance de bloquer l'événement avant qu'il ne soit sur le terrain.

Vous pouvez contourner cette limitation en donnant le navigateur la possibilité de mettre à jour le contenu du champ avant de saisir sa valeur - la façon la plus simple est d'utiliser un petit délai d'attente 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 rafraîchissant à 60fps alors vous avez 16ms de marge de manœuvre avant il accuse un retard de 2 images.


Un exemple plus complet (qui ne repose pas sur l' accès du nom sur l'objet de la fenêtre 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 le type
  • Coller un contenu au milieu de la zone de texte
  • Sélectionnez un tas de texte et tapez le remplacer
Créé 27/08/2009 à 03:04
source utilisateur

voix
3

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 ont soutenu cet événement depuis longtemps (voir le tableau de compatibilité dans le lien); pour IE sa version> / 9 seulement malheureusement.

Créé 24/03/2013 à 22:46
source utilisateur

voix
0

Jquery est la meilleure façon de le faire. S'il vous plaît faire référence à ce qui suit ci-dessous:

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

fieldText.on('keydown', function() {
   fieldVal.val();
});
Créé 04/01/2018 à 23:02
source utilisateur

voix
0

S'il vous plaît, essayez d'utiliser oninput événement. Contrairement à onkeydown , onkeypress propriété événements de la valeur de cette mise à jour de l' événement contrôle.

<input id="txt1" value="cow" oninput="alert(this.value);" />
Créé 11/08/2017 à 14:25
source utilisateur

voix
0

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

Créé 06/03/2013 à 19:27
source utilisateur

voix
0

A ma connaissance, vous ne pouvez pas le faire avec un contrôle d'entrée standard à moins que vous roulez votre propre.

Créé 27/08/2009 à 03:06
source utilisateur

voix
0

é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 les rendent se comportent de la même, faire face à la propagation et bouillonnante, et vous donner une norme « ce » dans le rappel.

Créé 27/08/2009 à 02:58
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more