Prevenir el comportamiento predeterminado en la entrada de texto mientras se presiona la flecha hacia arriba

Question

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

Estoy agregando el evento de JavaScript keyup para ver cuando el usuario presiona la tecla de flecha hacia arriba (e.which == 38) - luego incremente el valor numérico.

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

Pero esto no crea un efecto muy estético del cursor al saltar hacia adelante y hacia atrás (después de que se modificó el valor).

El salto al principio ocurre en keydown pero incluso con este conocimiento no puedo evitar que ocurra. He intentado lo siguiente:

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

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

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

Answer 1

Para conservar la posición del cursor, haga una copia de seguridad input.selectionStart antes de cambiar el valor.

El problema es que WebKit reacciona a keydown y Opera prefiere keypress, por lo que hay kludge: ambos se manejan y regulan.

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

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

Busqué en Google y encontré este fragmento de código. No puedo probarlo ahora y se dice que no funciona en IE 6.

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

Answer 3

Probé el código y parece que cancela el evento, pero si no presiona la flecha durante un tiempo muy corto, desencadena el evento de pulsación de tecla y ese evento realmente mueve el cursor. Simplemente use preventDefault() también en el controlador de eventos keypress y debería estar bien.

Answer 4

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.keyCode === 38 || e.keyCode === 40) return false; 
}, false); 

Answer 5

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!