Tengo el siguiente cuadro de entrada:

enter image description here

El código HTML del cuadro de entrada es el siguiente:

<input type="number" min="1" max="50" defaultValue="12"/>

Por lo tanto, mis preguntas son, por favor:

¿Hay alguna forma de obligar al usuario a usar las teclas de flecha hacia arriba y hacia abajo y no permitir que el usuario elimine / modifique el número en el cuadro de entrada directamente? Si es así, ¿cómo puedo hacer esto en HTML o usando React.js?

0
aBlaze 15 sep. 2018 a las 03:00

3 respuestas

La mejor respuesta

Puede limitar el usuario a las teclas ArrowUp y ArrowDown en keydown marcando el KeyboardEvent.key:

document.getElementById('example').addEventListener('keydown', event => {
  if (!['ArrowUp', 'ArrowDown'].includes(event.key)) {
    event.preventDefault();
  }
});
0
Grant Miller 18 sep. 2019 a las 03:14

Puede detectar pulsaciones de teclas en el cuadro de entrada y rechazarlas. El evento onkeypress no se activa al presionar una flecha hacia arriba o hacia abajo en un cuadro de entrada de número (al menos en cromo).

document.querySelector('#num').onkeypress = function(e){
    e.preventDefault();
}

Sin embargo, no recomendaría hacer esto: no hay garantía de que el usuario tenga un navegador que admita el control giratorio de entrada.

En su lugar, debe observar cualquier cambio en la entrada y asegurarse de que el cambio se active correctamente.

0
Trenton Trama 15 sep. 2018 a las 00:54

Intente usar onKeyPress=this.your_key_eventlister_function() en su campo de entrada entonces en tu función your_key_eventlistener_function (e) { if (e.key! = 'ArrowUp' || e.key! = 'ArrowDown') { e.preventDefault (); } }

0
Zadiki Hassan Ochola 16 sep. 2018 a las 05:58