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

Question

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

J'ajoute événement JavaScript keyup pour voir quand l'utilisateur appuie sur flèche jusqu'à clé (e.which == 38) -. J'incrémenter la valeur numérique

Le code fonctionne bien, mais il y a une chose qui me dérange. Les deux Safari / Mac et Firefox / Mac déplacer le curseur au début quand je suis en appuyant sur la touche flèche vers le haut. Ceci est un comportement par défaut pour chaque champ de texte <input type="text"/> autant que je sache, et il est logique.

Mais cela ne crée pas un effet très esthétique du curseur de saut en arrière et en avant (après la valeur a été modifiée).

Le saut au début se passe sur keydown mais même avec cette connaissance, je ne suis pas en mesure de l'empêcher de se produisant. J'ai essayé ce qui suit:

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

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

Est-il possible pour empêcher le curseur de se déplacer?

Answer 1

Pour préserver la position du curseur, input.selectionStart sauvegarde avant de modifier la valeur.

Le problème est que WebKit réagit à keydown et Opera préfère keypress, donc il y a bidouille:. Les deux sont manipulés et étranglé

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

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.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);

Answer 3

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, il est si facile!

Answer 4

Je l'ai testé le code et il semble qu'il annule l'événement, mais si vous n'appuyez pas sur la flèche pour très peu de temps - il déclenche l'événement et que cet événement keypress se déplace effectivement curseur. Il suffit d'utiliser preventDefault () également gestionnaire d'événements et il devrait keypress bien.

Answer 5

Probablement pas. Vous devriez plutôt chercher une solution pour déplacer le curseur à la fin du champ où il était. L'effet serait le même pour l'utilisateur car il est trop rapide pour être perçue par un être humain.

Je googlé un peu et trouvé ce morceau de code. Je ne peux pas tester maintenant et il est dit de ne pas travailler sur IE 6.

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