0

Como puedo hacer para agregar separador de miles a mis campos de tipo number y que tambien tengan hasta 3 decimales?

Estos son algunos de mis campos:

<div class="form-group col-md-2">
                    <label for="fob">Costo Fob</label>
                    <input type="number"   step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
                </div>

                

                <div class="form-group col-md-2">
                    <label for="nacFactor">Factor de Nacionalizacion</label>
                    <input type="number"   step="00.01" id="nacFactor" name="nacFactor" class="form-control" onchange="Todas();" onkeyup="Todas();"  required>
                </div>

Se que se puede hacer con el toLocalString pero no se como aplicarlo en una funcion para que me lo tome en mis campos.

1 respuesta 1

1

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 opciones new 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">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.