Tengo una entrada de número: <input type = 'number> , y necesitaba saber cómo limitar la cantidad de enteros que podría insertar en la entrada
Así que se me ocurrió lo que hay en el fragmento, pero ¿hay otras soluciones que puedan ser más rápidas de implementar o simplemente mejores en general?
Esta pregunta tiene una respuesta similar, pero estoy tratando de buscar en Internet para ver si hay una respuesta mejor.
EDITAR: He encontrado la respuesta que funciona, y estoy buscando algo de una sola línea que funcione. Algo así como max = '4' o la versión de entrada maxlength = '4'
const Input = document.getElementById('input') function limitDigits(element, amount) { element.addEventListener('input', () => { if (element.value.length > amount) { element.value = Math.floor(element.value/10) } }) } limitDigits(Input, 4) input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #input { width:30px; } <input id = 'input' type = 'number'>Lo único más eficiente (especialmente si está utilizando esta funcionalidad más de una vez) sería hacerlo más reutilizable, de esa manera no tiene que crear una instancia cada vez a través del código.
document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('[maxlength]').forEach(input => { input.addEventListener('input', e => { let val = e.target.value, len = +e.target.getAttribute('maxlength'); e.target.value = val.slice(0,len); }) }) }) input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #input { width: 30px; } <input maxlength='4' type='number'>Puede usar el atributo maxlength para hacer esto:
<input id='input' type='text' maxlength='10'>Desafortunadamente, esto no funciona con la entrada del número de tipo. Se puede encontrar una solución aquí: longitud máxima ignorada para el tipo de entrada = "número" en Chrome
Un buen lugar para aprender sobre HTML es MDN, que tiene una página dedicada a <input type="number"> .
La lista de atributos incluye:
máximo
El valor máximo que se acepta para esta entrada.
Tenga en cuenta que un campo numérico está diseñado para representar un valor numérico real , no una cadena que se compone de dígitos. Entonces, en lugar de "menos de 4 dígitos", debe decir "un valor menor o igual a nueve mil novecientos noventa y nueve":
<input id='input' type='number' max='9999'>