Por favor, ayuda, ¿cómo hacer una entrada como esta en javascript? Número mínimo que se puede ingresar = 0.01 Número máximo que se puede ingresar = 94.99 si pasa el mínimo/máximo, volverá automáticamente al número predeterminado para el mínimo/máximo. Mientras tanto, si ingresa el número 01.21, el número cambiará automáticamente a 1.21
Gracias por tomarse el tiempo para responder y proporcionar orientación.
Quiero crear un campo de entrada similar a este
Intenté así pero no funciona
function minmax(value, min, max) { if (parseInt(value) < 0.01 || isNaN(value)) return 0.01; else if (parseInt(value) > 94.99) return 94.99; else return value; } <input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0.01, 94.99)" />Probablemente ni siquiera necesite usar JavaScript para esto, simplemente HTML puede resolver su problema. La etiqueta de input tiene las propiedades min y max que establecen valores mínimos y máximos para la entrada. Además, puede establecer el step de su entrada en 0.01.
Esto debería resolver sus problemas en el front-end. Pero tenga en cuenta que esto no es suficiente para garantizar que los datos recibidos por el back-end (si ese es el caso) siguen sus especificaciones, porque los usuarios maliciosos pueden alterar su página y enviar los datos de todos modos, o incluso pasar por alto el front-end. completamente. Por lo tanto, el back-end también debe verificar si los datos recibidos están en el formato correcto.
Puede usar el evento onchange para esto o agregar un detector de eventos al campo de entrada y min, max para especificar el número máximo y mínimo.
<input id="input1" type="number" onchange="minmax()" min="0.01" max="94.99">Luego puede usar javascript para comparar el valor ingresado por el usuario con los valores mínimo y máximo usando una condición if. Si el valor ingresado por el usuario no es válido, simplemente reemplace el valor del campo de entrada con el valor mínimo o máximo.
Use parseFloat() ya que está tratando con flotadores.
function minmax() { let inp_field = document.getElementById("input1"); let val = parseFloat(inp_field.value), min = parseFloat(inp_field.min), max = parseFloat(inp_field.max); if (val < min) { inp_field.value = min; } else if (val > max) { inp_field.value = max; } else { inp_field.value = val; } }Y para la última parte, parseFloat lo hará automáticamente borrando los ceros iniciales.
Hay dos controladores de eventos limitRange() está vinculado al evento de entrada y keepDot() está vinculado al evento keyup (establecido en la captura, tenga en cuenta que el tercer parámetro es true ). keepDot() solo maneja la forma en que Firefox se niega a aceptar el . llave.
x.addEventListener('input', limitRange); x.addEventListener('keyup', keepDot, true);Tiene dos trabajos. El primer trabajo es limitar la entrada por debajo de .01 o por encima de 94.99
this.value = +v < .01 ? '.01' : +v > 94.99 ? '94.99' : v;El segundo trabajo es eliminar los ceros iniciales.
this.value = v.replace(/^0+/, ''); const x = document.querySelector('#x') x.addEventListener('input', limitRange); x.addEventListener('keyup', keepDot, true); function limitRange(e) { let v = this.value; this.value = +v < 0.01 ? '0.01' : +v > 94.99 ? '94.99' : v; this.value = this.value.replace(/^0+(?=\d)/, '') } function keepDot(e) { if (e.key === '.') { this.value = this.value + '.' } } <input id='x' type='number' min='.01' max='94.99' step='any'>