Formatear un input numérico

El script Como funciona
 //Mas en: http://javascript.espaciolatino.com/
function iniTodo(idForm, idCampo, dec, mil)
{
var obj = document.getElementsByName(idForm);
obj[0].minumero = new oNumero()
obj[0].idCampo = idCampo;
obj[0].posDec = dec;
obj[0].miles = mil;
obj[0].onkeyup = procTecla;
}

function procTecla(ev)
{
var cadena='';
var pd , minum;
var campo = this.idCampo
if (!document.all) event=ev
if (event.keyCode >36 && event.keyCode <41)
    return
if ((event.keyCode != 110) && (event.keyCode < 96 || event.keyCode > 105))
    return
if (event.keyCode < 96 || event.keyCode > 106)
    return
if (this[campo].value=='0')
     this[campo].value = '';
cadena = this[campo].value;
if ((event.keyCode == 109 || event.keyCode == 107) &&    cadena.length >0)
         return
if (event.keyCode == 110)
    if (pd < cadena.length-1 || pd==0)
        {
        cadena = cadena.substr(0, cadena.length-1)
        if (cadena.length==0) cadena ='0.'
            return
        }
pd = cadena.indexOf('.')
if (pd >= 0)
    pd = cadena.length - pd -1;
else
    pd = -1
if (pd > this.posDec )
    {
    cadena = cadena.substr(0, cadena.length-1)
    pd=this.posDec;
    }
this.minumero.ponValor(cadena.replace(/\,/g,''))
cadena = this.minumero.formato(pd, this.miles)
if (cadena=='0')     
     cadena =""
this[campo].value = cadena
}

Estas dos funciones se usan para controlar el valor numérico que un usuario teclea en un campo input de un formulario, colocando los decimales y la coma de miles en su lugar. Para poder usarlo necesitas el objeto oNumero descrito en el script formateando numeros.

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.

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: una variable tipo oNumero, el identificador del campo donde se debe actuar, el número de decimales deseados y si se desea separador de miles. La primera de estas propiedades guarda el valor numérico introducido y lo escribe en el campo input ya formateado. Recuerda que el valor numérico puro (sin formatear) está en la propiedad numero.valor del objeto formulario que hayas utilizado.

La página Como se usa
 <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>
 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.
   
     
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio