2

Tengo este codigo que sin problemas formatea mi input y va agregando las divisiones de miles (puntos en este caso), pero necesito que este mismo codigo ademas de añadir puntos (.) para los miles tambien me añada comas (,) para 2 decimales. Gracias de antemano.

<!DOCTYPE html>

<html>
<head>
    <title>DEMO MILES </title>

<script>
    function format(input) {
        var num = input.value.replace(/\./g, '');
        if (!isNaN(num)) {
            num = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g, '$1.');
            num = num.split('').reverse().join('').replace(/^[\.]/, '');
            input.value = num;
        }

        else {
            alert('Solo se permiten numeros');
            input.value = input.value.replace(/[^\d\.]*/g, '');
        }
    }
</script>

</head>

<body>
    <form>
        <input type="text" onkeyup="format(this)" onchange="format(this)">
        
    </form>
</body>


</html>
1

2 respuestas 2

2

Podrías hacer los siguitens cambios:

Ahora la dificultad que se presenta es dar formato a medida que se ingresa el número, para esto hay que considerar:

  • Si agregamos una coma al final, quiere decir que vamos a empezar a ingresar los decimales, entonces debemos evitar borrarla (Ref 1)

  • Si agregamos ceros (0) después de la coma, debemos evitar borrarlos y para esto necesitamos indicar la cantidad mínima de decimales que vamos a usar (Ref 2)

Ejemplo:

function format(input) {
  // Obtenemos el valor del input, borramos los puntos y reemplazamos la coma por punto
  let num = input.value.replace(/\./g, '').replace(/\,/g, '.');
  
  // Si es un número
  if (!isNaN(num)) {
  
    // Si tiene punto, indicamos la cantidad minima de decimales 
    // igual a la cantidad de digitos despues del punto (Ref 2)
    let options = num.includes('.') ? {minimumFractionDigits: num.split('.')[1].length} : {};
    
    // Formateamos
    input.value = new Intl.NumberFormat('es-AR', options).format(num);
    
    // Si termina en punto, agregamos una coma al final (Ref 1)
    if (num.slice(-1) == '.') input.value += ',';
  } else {
    alert('Solo se permiten numeros');
    input.value = input.value.replace(/[^\d.]*/g, '');
  }
}
<input type="text" oninput="format(this)">

1

Algo mucho más sencillo y en menos líneas de código, podemos hacerlo de la siguiente forma:

  • Permitimos que solamente se ingrese números, puntos y comas.
  • Dividimos al valor en dos partes (entera y decimal) con split() usando a la , como separador.
  • Validamos que no haya más de dos comas (o sea más de 2 elementos, ya que usamos a la , como separador). Si ocurre, hacemos un pop() al array, eliminando el último elemento.
  • Con una expresión regular, damos formato sólo a la parte entera, que sería el primer elemento del array obtenido con el split().
  • Luego unimos las dos partes (entera y decimal) usando la coma como la unión de ambos elementos.

Demo:

function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');

  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(',');

  // Cuando coloco la coma, estoy creando un elemento más en el array, entonces si la longitud del array es mayor a 2, eliminamos ese último elemento, teniendo solo 2 elementos siempre (parte entera y parte decimal).
  if (partes.length > 2) partes.pop();

  // Aquí buscamos en grupos de tres dígitos que estén seguidos por un dígito, y añadimos un punto después del primer dígito del grupo de 3 encontrado, es decir, si ingreso "12345", capturo 3 digitos luego del primero (que es "234"), y devolvemos ese mismo pero con un punto delante del primer elemento del grupo de 3 (que sería "2.34") y juntándolo sería "12.345".
  // Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');

  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">

function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');

  if (partes.length > 2) partes.pop();

  partes[0] = partes[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">

2
  • En este caso estan bien las restricciones de solo numeros y una coma al teclear, sin embargo no hace las divisiones de miles como deberia, por ejemplo, al teclear 6000 para que me los fornatee a 6.000 el codigo lo formatea como 600.0
    – Josebas
    Commented el 10 may. 2023 a las 15:22
  • @Josebas edité mi respuesta y agregué una breve explicación, con eso debería quedar. Commented el 14 may. 2023 a las 2:18

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.