0

tengo un formulario en donde tengo un input text donde se agrega una cantidad, tengo un ref que es un objeto con cada campo del formulario donde en el input le asigno con un v-model, en el input agrego el evento @input donde mando a llamar una funcion y obtengo el value(e.target.value) para despues formatear, esto lo muestra bien en consola, pero quiero mostrar este resultado en el input, lo que hago es que el resultado formateado lo agrego al valor del objeto para que lo muestre en el input, lo muestra bien hasta escribir 5 digitos, despues de esto me pone un NaN y me deja escribir mas numeros con pero sin formato y con el NaN al inicio, como puedo solucionar esto?.

Este es el codigo:

<input type="text" :value="datos.cantidad" @input="formatCantidad">

const datos = ref({
    cantidad: ''
})

const formatCantidad = (e) => {
    const value = e.target.value;
    const format = new Intl.NumberFormat("es-ES", {
    maximumFractionDigits: 3,
    }).format(value)

    datos.value.cantidad = format
}

1 respuesta 1

1

Tienes un problema circular:

  • Escribes un número
  • Se formatea el número
  • Se guarda el número formateado dentro del input donde se escribe
  • Vuelves a escribir el número que ya ha sido formateado y ahora tiene un caracter adicional
  • Vuelves a formatear. Pero ese número ya tiene formato!

Yo lo probé en JS puro, donde este veo es el comportamiento

const formatCantidad = (e) => {
    const value = e.value;
    const format = new Intl.NumberFormat("es-ES", {
    maximumFractionDigits: 3,
    }).format(value)

    e.value = format
}
<input type="text" oninput="formatCantidad(this)">

Una forma de corregir el problema es desformatear el texto. Yo tomé prestada la función parseLocaleNumber. Además coloqué un if para ver si el último carácter es "coma" o "punto", de lo contrario no tomaría estos caracteres

const formatCantidad = (e) => {
  if(e.value.length>0 && e.value[e.value.length-1] !="." && e.value[e.value.length-1] !=","){
      const value = parseLocaleNumber( e.value,"es-ES");
    const format = new Intl.NumberFormat("es-ES", {maximumFractionDigits: 3,}).format(value)
    e.value=format;
  }

}

function parseLocaleNumber(stringNumber, locale) {
    var thousandSeparator = Intl.NumberFormat(locale).format(11111).replace(/\p{Number}/gu, '');
    var decimalSeparator = Intl.NumberFormat(locale).format(1.1).replace(/\p{Number}/gu, '');

    return parseFloat(stringNumber
        .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
        .replace(new RegExp('\\' + decimalSeparator), '.')
    );
}
<input type="text" id="test" oninput="formatCantidad(this)">

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.