Evitar el comportamiento por defecto de entrada de texto mientras se presiona la flecha hacia arriba

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

Voy a agregar eventos de JavaScript keyup a ver cuando el usuario presiona flecha arriba tecla (e.which == 38) – luego me incrementar el valor numérico.

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

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

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

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

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

Es hay alguna manera para evitar que el cursor se mueva?

InformationsquelleAutor riddle | 2009-07-03

5 Comentarios

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

El problema es que WebKit reacciona a keydown y la Ópera prefiere keypress, así que no hay parche: ambos son manejados 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);

Busted es! Muchas gracias, es perfecto. 🙂
Hasta votar por «kludge»! Trabajó para mí, gracias por la respuesta.

InformationsquelleAutor Kornel

16

He encontrado que la mejor solución es sólo para return false; para prevenir el valor predeterminado de la tecla de flecha comportamiento:
```
input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);
```
- Gracias hombre. La idea es utilizar el evento keydown en lugar de keyup.
- Haga keydown es el truco. Tenga en cuenta que devolver false parece detener el evento de la propagación de la totalidad, mientras que preventDefault() le permitirá a la caja de entrada de ignorar el evento, mientras que todavía permite a los demás oyentes de manejarlo como burbujas.
- su solución ha funcionado mejor para mí. Sin embargo, estoy llamando a la e.preventDefault(); en lugar de devolver false. El último no lo lograr la congelación de la tecla de flecha hacia arriba comportamiento. Gracias por la publicación de una alternativa de solución, más simple.
- Esta es la respuesta correcta! He tenido que utilizar el evento keydown para detener el cursor en movimiento y, a continuación, el evento keyup para obtener el valor de la entrada cuando sea necesario
- Muy bonito, funciona muy bien gracias!
- Perfecto, gracias!
- Utilizando el correo.código === ‘ArrowUp’ || e.código === ‘ArrowDown’ hará que el código es mucho más fácil de leer.
InformationsquelleAutor Lukas
5

De hecho, hay un mejor y más sencillo método para hacer este trabajo.
```
$('input').bind('keydown', function(e){
    if(e.keyCode == '38' || e.keyCode == '40'){
        e.preventDefault();
    }
});
```
Sí, es así de fácil!
- Perfecto! Funciona en ReactJS demasiado!
InformationsquelleAutor JChen___
0

He probado el código y parece que se cancela el evento, pero si no pulsa la flecha de tiempo muy corto – dispara un evento de pulsación de tecla y que el evento realmente mueve el cursor. Sólo uso preventDefault() también en el evento keypress de controlador y que debería estar bien.
- Por desgracia, e.preventDefault() en keypress evento me impide entrar nada allí (yo quiero entradas a la obra como en Firebug). Y no soluciona mi problema, al menos en mi navegador – cursor todavía saltos en el principio.
InformationsquelleAutor
-2

Probablemente no. En su lugar usted debe buscar una solución para mover el cursor hasta el 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 ser humano.

Busqué en google alguna y encontré este pedazo de código. Yo no puedo probar ahora y se dice que no funcionan en IE 6.

cuadro de texto.setSelectionRange(cuadro de texto.valor.la longitud, el cuadro de texto.valor.longitud);
- Gracias. En realidad, la actualización de la entrada.valor cursor se mueve de atrás al final. Así que yo podría detectar la posición del cursor y, a continuación, restaurar después de cambio (si es en el medio de un número, por ejemplo). Pero todavía estoy buscando la mejor solución, si es que existe.
InformationsquelleAutor Leahn Novash

5 Comentarios

Dejar respuesta Cancelar respuesta