Puedes usar la biblioteca de javascript autoNumeric que hace justo lo que requieres con múltiples opciones de configuración. Por defecto usa como separador de miles la ,
, como separador decimal el punto .
y usa 2 decimales. En tu caso solo necesitarías establecer la opción de 3 decimales con decimalPlaces
.
- Para inicializar el input, instancia la clase
AutoNumeric
pasándole al constructor un selector de css que identifique el input que requieres formatear y como segundo parámetro un objeto con las opcionesnew AutoNumeric('selector',{opciones});
- Para establecer el separador de miles usa
digitGroupSeparator: ','
- Para establecer el separador decimal usa
decimalCharacter: '.'
- Para establecer el número de decimales usa
decimalPlaces: '3'
Para usarla incluye el cdn en tu html e inicializa la clase en cualquier etiqueta script
o bien en tu archivo de javascript
. También podrías instalarla con npm. Consulta más detalles y opciones en la documentación. Ten en cuenta que debes inicializar el input de tipo text
.
Para el procesamiento de los datos, puedes obtener el número sin formato usando el método getNumber
.
Te adjunto un ejemplo funcional:
let myNumericInput = new AutoNumeric('.myInput',{decimalPlaces: 3});
document.querySelector('.myInput').addEventListener('keyup',() =>{
console.log(myNumericInput.getNumber())
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<input type="text" class="myInput">