Tengo una entrada y necesito que se limite solo a estos valores:
Mín.: 0,01 máx. 999,99
Si uso maxlength="6" puedo ingresar, por ejemplo, 999.99 pero también 1000.1 que no es un valor aceptado.
Lo que he probado:
1er intento (no funciona):
<input type="number" id="quantity" name="quantity" maxlength="6" min="0.01" max="999.99">2do intento (parcialmente funcionando):
let maximumFractionDigits = 2; const formatNumber = (value) => { return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits }); } $('input[name="test"]').on('keyup',function(){ maximumFractionDigits = 2; if (!$(this).val() || (maximumFractionDigits && $(this).val().endsWith('.'))) { return } $(this).val(formatNumber($(this).val()).replace(/,/g,'')); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> INPUT TEST <input type="text" maxlength="6" name="test" class="form-control"> <br> Con el segundo enfoque, todavía puedo ingresar números extraños como 10000. y no se pueden ingresar valores como 0.0X (supongo que es redondeado), ¿cómo podría simplemente limitar los valores a Min: 0.01 max 999.99 ?
Puede verificar 3 condiciones, para los primeros 2 convertir número a cadena
La longitud máxima de la cadena debe ser 6 maxlength = 6
Si la cadena tiene un punto decimal, entonces .split('.') y verifique la longitud de los números const decimal = input.split('.')[1]
Compruebe si el número es 0.01 < number < 999.99
Tienes métodos para lograr lo mismo.
<input type="number" min=0.01 max=999.99 name="test" class="form-control" aria-label="Equipment Procurement %"> const numInput = document.querySelector(".form-control"); numInput.addEventListener("input", (event) => { const number = parseInt(e.target.value); if (number > 999.99 && number < 0.01) // throw Error or do whatever you want to do })Así que básicamente encontré una solución:
const input = document.querySelector('.example'); input.addEventListener('input', updateValue); function updateValue(e) { let number = e.target.value; number = number.toString(); if(number.match(/^\d{1,3}(\.\d{1,2})?$/)){ console.log("True"); } else{ const newNum = (e.target.value).toString().slice(0, -1) e.target.value = parseFloat(newNum); } } <input type="number" class="form-control example" id="quantity" name="quantity" maxlength="6" min=0.01 max=999.99>Espero que esto ayude si alguien tiene la misma situación.