En realidad, no hay una forma HTML "nativa" fuera de una publicación de formulario para evitar la entrada manual defectuosa. Podrías hacer algo como esto (aquí código jquery):

 $('input[type="number"]').on('change input keyup paste', function () { if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0); });

Este código se aplica a todas las entradas de tipo número en caso de entrada de teclado, pegado, cambio de un método de validación que verifique si existe un valor máximo y, de ser así Math.min() devuelve el número de valor más bajo que se le pasó. Si el valor no es un número, se devuelve 0.

Ver una demostración en JSFiddle

En Vanilla JavaScript, el controlador se vería así:

 var numElement = document.querySelector('input[type="number"]') numElement.addEventListener('change', validateMax); numElement.addEventListener('input', validateMax); numElement.addEventListener('keyup', validateMax); numElement.addEventListener('paste', validateMax); function validateMax() { if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0); }

Vea una demostración de la versión vainilla en JSFiddle

Este controlador debería hacer el truco.

No creo que haya una solución directamente con HTML; los atributos max y min solo funcionan al hacer clic en las teclas de flecha arriba y flecha abajo. Consulte la publicación en la sección de referencias para obtener más información. La siguiente imagen muestra que la entrada no cambia cuando se hace clic en el botón de flecha hacia arriba, ya que el atributo max es 100:

En la solución a continuación, cuando se activa el evento de input del elemento <input> , la entrada de datos se verifica al verificar el atributo max con el método isValid() . Puede cambiar la propiedad disabled del botón de envío de acuerdo con el resultado devuelto por el método isValid() .

 const inputElement = document.querySelector('input'); function isValid(value){ if(parseInt(value) <= inputElement.getAttribute('max')) return true; return false; } inputElement.addEventListener('input', function () { if(isValid(this.value)) console.log("true"); else console.log("false"); });

 <input type="number" max="100">

Referencias

• ¿Cómo puedo limitar las posibles entradas en un elemento de "número" de HTML5?

Si está utilizando un formulario, puede marcarlo como requerido y el formulario realiza la validación por usted.

 document.getElementById("myForm").addEventListener("submit", function (event) { event.preventDefault(); console.log(document.getElementById("myNumber").value); });

 <form id="myForm"> <input id="myNumber" name="myNumber" type="number" max="100" required > <button>Send It</button> </form>

Ahora, si desea saber si es válido en JavaScript directamente, hay métodos integrados para eso

 document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); console.log(document.getElementById("myNumber").value); }); document.getElementById("check").addEventListener("click", function(event) { console.log("form: ", document.getElementById("myForm").checkValidity()); console.log("input: ", document.getElementById("myNumber").validity.valid); });

 <form id="myForm"> <input id="myNumber" name="myNumber" type="number" max="100" required> <button>Send It</button> </form> <button type="button" id="check">Check It</button>