document.querySelector("#maca").addEventListener("keydown", function(e) { if (e.target.value > this.getAttribute("max")) { e.preventDefault(); } }) <input type="text" name="maca" placeholder="maca" id="maca" max="7">Estoy tratando de evitar que el usuario ingrese un número mayor que el valor del atributo máximo. Lo que sucede es que primero se le permite al usuario escribir un número mayor y luego no.
¿Cómo puedo arreglar esto?
¡Muchas gracias!
Es más complicado de lo que parece, porque incluso <input type="number" max="7"/> te permite ingresar 9 sin quejarte (creo que debería quejarse y bloquear la entrada, pero por alguna razón no lo hace). Ejemplo a continuación
<input type="number" max="7"/>Se me ocurrió esta pequeña solución JS:
const max = +maca.getAttribute("max"); maca.addEventListener("keydown", function(e) { const typed = +e.key; if(!isNaN(typed)) e.preventDefault(); // Allow any non-number keys (backspace etc.) if ( +(e.target.value + typed) <= max) { maca.value += typed } else { console.log(`Number too big! Max is ${max}`) } }) <input type="number" name="maca" placeholder="maca" id="maca" max="7"> Esto realmente no permitirá que el usuario escriba 8 o 9 . Además, puede escribir 1 pero luego no puede agregar otro dígito para escribir 11 .