Formatear un input numérico

indice de ejemplos
Este ejemplo esun script utilizado para formatear un valor numérico que se teclea en un input de un formulario. A medida que se va teclenado se añaden los puntos de miles.

Solución

<script>
function iniTodo(idForm, idCampo, dec, mil){
    let obj = document.getElementsByName(idForm)[0];
    obj.idCampo = idCampo;
    obj.posDec = dec;
    obj.miles = mil;
    obj.onkeyup = procTecla;
    obj.sepMil = ",";
    obj.sepDec = ".";
    obj.local = "en-US";
}

function procTecla(ev){
    let campo = this.idCampo
    let cadena = this[campo].value;
    let punto = cadena.indexOf(this.sepDec);
    let decimales = (punto>=0)?cadena.substr(punto):"";
    let tecla = event.key;
    let cars = /[\.0-9+\-]/;
    let digs = /[\.0-9]/;
    let minumero = 0;
 
    if(cadena.length==0){
        return
    }
//primer caracter
if(cadena.length==1){
    if (cars.test(tecla)){
        cadena = tecla;
        if (tecla == this.sepDec){
            cadena = '0'+this.sepDec;
        }
    }
}
//otro caracter . 0-9
else{
    if(digs.test(tecla)){
        if (punto > 0){
            if(cadena.split(this.sepDec).length == 2){
                decimales = cadena.substr(punto);
                if(decimales.length-1 > this.posDec){
                    decimales = decimales.slice(0,-1);
                    cadena = cadena.slice(0, -1 );
                }
            }
        }
    }
    else{
        //una tecla de carácter
        if(tecla.length==1){
            decimales = decimales.slice(0,-1);
            cadena = cadena.slice(0,-1);
        }
    }
    minumero = parseInt(cadena.replaceAll(this.sepMil,''));
    cadena = minumero.toLocaleString(this.local);
    cadena = decimales.length>0? cadena+decimales : cadena;
}
this[campo].value = cadena
}
</script>

<body onload="iniTodo('form1', 'campo', 2, true)">

<form name="form1" method="post" action="">

Teclea un número

<input name="campo" type="text" id="numero" size="20">

</form>

</body>

Explicación

Estas dos funciones se usan para controlar el valor numérico que un usuario teclea en un campo input de un formulario, colocando la coma de milesen su lugar. Los decimals se incian con un punto, si se comienza a teclear por un punto el número será 0.

La base de este código está en la vinculación del evento onKeyup del campo input, que se dispara cuando se suelta una tecla. La función vinculada, procTecla(), se encarga de filtrar las teclas válidas (sólo números, signos, coma y punto) y de formatear el valor que en cada momento se encuentra en el campo input. Este formateo se lo dejamos a javascript con el método toLocaleString()

Observa el uso de this para referirse al formulario que dispara el evento. La función iniTodo() se encarga de vincular el evento y añadir al formulario varias propiedades nuevas: el identificador del campo donde se debe actuar, el número de decimales deseados y si se desea separador de miles., el carácter separador de miles y decimales y el locale usado. Recuerda que el valor numérico puro (sin formatear) está en la propiedad numero.valor del objeto formulario que hayas utilizado.

Como lo uso

 Con esta página tan simple puedes comprobar el funcionamiento del script. Como puedes observar la página contiene un formulario con un sólo campo input denominado numero. Cuando el usuario teclea un número éste aparecerá formateado con 2 decimales como máximo y con la coma separadora de miles. Al cargarse la página se ejecuta la función iniTodo() que se encarga de vincular el evento onkeyup como se indica en la sección ver código.