Ahora mismo tengo implementado el siguiente código:
$(document).ready(function() { let maximumFractionDigits = 2; var valueInput = $("#exampleInput"); const formatNumber = (value) => { return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits }); } valueInput.on('input', function() { if (!this.value || (maximumFractionDigits && this.value.endsWith('.'))) { return } $(this).val(formatNumber(this.value)); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="exampleInput" class="form-control" aria-label="Grant Amount" type="text" placeholder="0" name="price" required="">Funciona bien y hace lo que quiero: cuando el usuario ingresa más de 3 dígitos, se agrega el separador de coma de mil y se permiten dos decimales (formato USD).
Sin embargo, si el usuario ingresa algún número en otro juego de caracteres, por ejemplo con un teclado japonés, o algún carácter inesperado, aparece el siguiente mensaje:
'Yaya'
Gastos esperados:
Si el usuario ingresa un carácter no válido, no debería aparecer en la entrada (quiero evitar el mensaje NaN), por ejemplo, si ingreso 'a', no aparecerá nada en la entrada.
Lo que he probado:
De alguna manera traté de usar la función isNaN pero mi enfoque definitivamente es incorrecto.
const formatNumber = (value) => { if (isNaN(value)){ return 0; } else{ return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits }); } }si alguien pudiera ayudarme se lo agradeceria mucho
Bueno, la solución es simple: debe verificar el carácter justo antes del evento de input , que es el evento de keypress de tecla.
valueInput.keypress( /** * Handle the keypress event on valueInput. * * Used to filter in only the numbers. */ function(e) { var keyCode = e.which if ((keyCode >= 32 && keyCode <= 43) || keyCode == 45 || keyCode == 47 || (keyCode >= 58 && keyCode <= 126)) return false } ); keyCode es solo el código ASCII de la tecla que se presiona:
, carácter y 46 es . carácter) Finalmente, al devolver false cuando se escribe un carácter que no es un número, básicamente le dice a jQuery que lo rechace como entrada. Por lo tanto, no activa el evento de input y su problema está resuelto.
En primer lugar, debe eliminar todos los caracteres, excepto el número y el punto, y eliminar el punto redundante. Finalmente, elimine parseFloat porque el valor de parseFloat('') es NaN.
$(document).ready(function() { let maximumFractionDigits = 2; var valueInput = $("#exampleInput"); const formatNumber = (value) => { const parsedValue = value.replace(/[^\d.]/gi, '').replace(/(?<!^[\d-]+)\./g, ''); return parsedValue ? (+parsedValue).toLocaleString('en-US', { maximumFractionDigits }) : ''; } valueInput.on('input', function() { if (!this.value || (maximumFractionDigits && this.value.endsWith('.'))) { return } $(this).val(formatNumber(this.value)); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="exampleInput" class="form-control" aria-label="Grant Amount" type="text" placeholder="0" name="price" required="">Encontré una posible solución:
const formatNumber = (value) => { var result = parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits }); const withoutCommas = result.replace(/,/g, ''); if (isNaN(withoutCommas)){ return } return result; }Básicamente, si después de analizar el flotador y eliminar el ',' isNaN=True, luego devuelve, si es un número, puedo devolver el resultado como se esperaba. Puede que no sea la solución más elegante, pero funciona.