Prévenir le comportement par défaut dans la saisie de texte tout en appuyant sur la flèche vers le haut

Question

Je travaille avec le champ de texte de base HTML <input type="text"/> avec une valeur numérique.

J'ajoute l'événement JavaScript keyup pour voir quand l'utilisateur appuie sur la touche fléchée vers le haut (e.which == 38) - alors j'incrémente la valeur numérique.

Le code fonctionne bien, mais il y a une chose qui me dérange. Safari/Mac et Firefox/Mac déplacent le curseur au tout début lorsque j'appuie sur la touche fléchée vers le haut. C'est un comportement par défaut pour chaque champ de texte <input type="text"/> autant que je sache et cela a du sens. Mais cela ne crée pas un effet très esthétique du curseur qui saute en arrière et en avant (après que la valeur ait été modifiée).

Le saut au début se passe sur keydown mais même avec cette connaissance je ne suis pas capable d'empêcher cela. J'ai essayé les éléments suivants:

input.addEventListener('keydown', function(e) { 
    e.preventDefault(); 
}, false); 

Mise en e.preventDefault()keyup événement ne contribue pas non plus.

Y a-t-il un moyen d'empêcher le déplacement du curseur?

Answer 1

Pour conserver la position du curseur, sauvegardez input.selectionStart avant de modifier la valeur.

Le problème est que WebKit réagit à keydown et Opera préfère keypress, donc il y a kludge: les deux sont gérés et limités.

var ignoreKey = false; 
var handler = function(e) 
{ 
    if (ignoreKey) 
    { 
     e.preventDefault(); 
     return; 
    } 
    if (e.keyCode == 38 || e.keyCode == 40) 
    { 
     var pos = this.selectionStart; 
     this.value = (e.keyCode == 38?1:-1)+parseInt(this.value,10);   
     this.selectionStart = pos; this.selectionEnd = pos; 

     ignoreKey = true; setTimeout(function(){ignoreKey=false},1); 
     e.preventDefault(); 
    } 
}; 

input.addEventListener('keydown',handler,false); 
input.addEventListener('keypress',handler,false); 

Answer 2

Probablement pas. Vous devriez plutôt chercher une solution pour ramener le curseur à la fin du champ où il se trouvait. L'effet serait le même pour l'utilisateur puisqu'il est trop rapide pour être perçu par un humain.

J'ai fait une recherche sur google et trouvé ce morceau de code. Je ne peux pas le tester maintenant et il est dit de ne pas fonctionner sur IE 6.

textBox.setSelectionRange (textBox.value.length, textBox.value.length);

Answer 3

J'ai testé le code et il semble qu'il annule l'événement mais si vous n'appuyez pas sur la flèche pendant très peu de temps - il déclenche l'événement keypress et cet événement déplace réellement le curseur. Utilisez simplement preventDefault() également dans le gestionnaire d'événements keypress et ça devrait aller.

Answer 4

J'ai trouvé qu'une meilleure solution est juste return false; pour empêcher le comportement flèche par défaut:

input.addEventListener("keydown", function(e) { 
    if (e.keyCode === 38 || e.keyCode === 40) return false; 
}, false); 

Answer 5

En fait, il y a une meilleure et plus simple méthode pour faire ce travail.

$('input').bind('keydown', function(e){ 
    if(e.keyCode == '38' || e.keyCode == '40'){ 
     e.preventDefault(); 
    } 
}); 

Oui, c'est si facile!