Prevenir el comportamiento por defecto de entrada de texto mientras se pulsa la flecha hacia arriba

Question

Estoy trabajando con campo de texto <input type="text"/> HTML básico con un valor numérico.

Estoy agregando JavaScript keyup evento para ver cuando el usuario pulsa la tecla flecha arriba (e.which == 38) -. Entonces incrementar el valor numérico

El código funciona bien, pero hay una cosa que me molesta. Tanto Safari / Mac y Firefox / Mac mover el cursor al principio cuando estoy presionando la tecla de flecha hacia arriba. Se trata de un comportamiento por defecto para cada campo de texto <input type="text"/> por lo que yo sé y tiene sentido.

Pero esto no crea un efecto muy estético del cursor saltar hacia atrás y hacia adelante (después fue alterado valor).

El salto al principio sucede en keydown pero incluso con este conocimiento no soy capaz de evitar que se ocurriendo. He intentado lo siguiente:

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

Poner e.preventDefault() en caso keyup tampoco ayuda.

¿Hay alguna manera de evitar que el cursor se mueva?

Answer 1

Para preservar posición del cursor, input.selectionStart de copia de seguridad antes de cambiar el valor.

El problema es que reacciona a WebKit y Opera keydown prefiere keypress, por lo que no kludge:. Ambos son manipulados y estrangulado

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

He descubierto que la mejor solución es sólo para return false; para evitar el default flecha comportamiento de las teclas:

input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);

Answer 3

En realidad, hay un método mejor y más simple para hacer este trabajo.

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

Sí, es tan fácil!

Answer 4

He probado el código y parece que se cancela el evento, pero si no se pulsa la flecha de tiempo muy corto - se activa el evento de pulsación de tecla y ese evento en realidad se mueve el cursor. Sólo tiene que utilizar preventDefault () también en controlador de eventos de pulsación de tecla y que debería estar bien.

Answer 5

Probablemente no. En su lugar debe buscar una solución para mover el cursor hacia atrás hasta el final del campo donde estaba. El efecto sería el mismo para el usuario, ya que es demasiado rápido para ser percibida por un ser humano.

Busqué en Google y encontré algo de esta pieza de código. No puedo probarlo ahora y se dice que es no trabajar en IE 6.

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