Estoy trabajando en un campo de entrada, que debería permitir a los usuarios ingresar números del 0 al 99. Además, no se debe permitir que el usuario ingrese un tercer dígito.
Para abordar lo anterior, tengo la siguiente expresión regular /^([0-9]{2})$/
Tengo la siguiente función que se activa en el evento de pulsación de tecla
onlyAllowNumbers(evnt: KeyboardEvent): boolean { const charCode = evnt.key; const pattern = /^([0-9]{2})$/; return pattern.test(charCode); }El patrón anterior no me permite ingresar ningún número en el campo de entrada.
Recomendaría actualizar la expresión regular para permitir 0 o 2 dígitos- /^[0-9]{0,2}$/ .
Los siguientes valores coincidirán: '', '0', '1', ... '10', ... '99'.
evento de keypress de tecla tiene los siguientes campos:
event.target.value - valor de la entrada antes de presionar la nueva teclaevent.key - valor de cadena de la tecla que se presionó Cuando event.target.value y event.key se combinan, podemos estimar el nuevo valor de la entrada.
La llamada event.preventDefault() se puede usar para bloquear el evento de pulsación de tecla si el valor resultante no coincide con el patrón necesario.
document.getElementById('myinput').addEventListener('keypress', event => { if (!`${event.target.value}${event.key}`.match(/^[0-9]{0,2}$/)) { // block the input if result does not match event.preventDefault(); event.stopPropagation(); return false; } }); <input id="myinput" type="text" value="" />Presumiblemente, querrá usar esto en un formulario. Si se dirige a navegadores modernos, el campo de input admite el atributo de patrón , que agrega una capa adicional de cumplimiento de patrones (en caso de que JavaScript esté deshabilitado).
Si está considerando la mejor experiencia de usuario, también querrá anticipar casos de uso menos comunes. Por ejemplo: si el usuario selecciona uno de los dígitos y escribe otro, está indicando que está reemplazando el dígito seleccionado por el nuevo.
El siguiente código toma todo esto en consideración:
<form> <input id="only_max_two_digits" type="text" pattern="^\d{1,2}$" /> <input type="submit" /> </form> <script type="text/javascript"> function remove_substr(s, src, dst) { return s.substr(0, src) + s.substr(dst); } document .querySelector("#only_max_two_digits") .addEventListener("keypress", (e) => { const { value, pattern, selectionStart, selectionEnd } = e.target; const next = remove_substr(value, selectionStart, selectionEnd) + e.key; if (!new RegExp(pattern).test(next)) { e.preventDefault(); } }); </script> La función remove_substr elimina una subcadena de una cadena entre dos límites numéricos dados. En este caso, lo estamos usando para eliminar el texto seleccionado, porque sabemos dónde comienza y termina la selección.
El detector de eventos:
keypress de tecla, es decir, cuando la tecla está presionada, pero el valor de <input> aún no se ha actualizado.next variable contiene la estimación de cuál será el próximo valor, 1) eliminando el texto seleccionado actualmente (si lo hay) y agregando el valor de la tecla que se está presionando.next variable no pasa la prueba del patrón Regex, se impide que <input> se actualice.Aquí hay un ejemplo funcional de CodeSandbox .
Debe usar el valor del evento, y recomiendo usar la expresión regular aquí en el código, la clave de evento para los números nunca coincide con la expresión regular porque '1' es solo un dígito
//evnt.key will return you the key pressed value onlyAllowNumbers(evnt: KeyboardEvent): boolean { const value = evnt.target.value; const pattern = /^\d{2}$/; return pattern.test(value); }