jueves, 23 de septiembre de 2010

Formatear un input tipo text a entero, o con 2 decimales, o con separador de n caracteres en n caracteres

Hola a todos, despues d eun largo tiempo de ausencia retomo la blogosfera para compartir algo con lo que estruve lidiando esta semana, se me presento el problema de formatear una caja de texto para que acepte solo numeros enteros y otra caja de texto para q acepte numeros con n decimales, les explicare el codigo a usar y al final del articulo dejare los archivos para que descarguen los ejemplos.

Primero veremos el ejemplo para numero entero:

Javascript a utilizar:


function validarEntero(valor){
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parseInt(valor)
//Compruebo si es un valor numérico
if (isNaN(valor)) {
//entonces (no es un numero) devuelvo el valor cadena vacia
return ""
}else{
//En caso contrario (Si era un número) devuelvo el valor
return valor
}
}
function validarFormulario(){
//extraemos el valor del campo
textoCampo = window.document.formul.texto.value
//lo validamos como entero
textoCampo = validarEntero(textoCampo)
//colocamos el valor de nuevo
window.document.formul.texto.value = textoCampo
}


Y dentro del tag body ponemos el objeto input dentro de un form:


< method="post" name="formul" action="">
Teclea un número:
< id="texto" onkeyup="validarFormulario()" onchange="validarFormulario()" name="texto">
< /form>


Ahora veremos el ejemplo para numero con 2 decimales, para esto hago la observacion que el usuario no ingresara el punto decimal por ejemplo si se desa ingresar 45.68 el usuario solo tecleara 4568 y el punto se añadira automaticamente, otro ejemplo si se desa ingresar 45.6 el usuario debera teclear solamente 4560 y se añadira el punto automaticamente.

Javascript a utilizar:


function format(input)
{
var num = input.value.replace(/\./g,'');
if(!isNaN(num)){
if(num.length>2)
{
num=num.substring(0,num.length-2)+'.'+num.substring(num.length-2);
}
input.value = num;
}

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


Y dentro del tag body ponemos el objeto input dentro de un form:


< form>
< type="text" id="c4" name="c4" runat="server" onkeyup="format(this)" onchange="format(this)">
< /form>


Bueno aqui les dejo los ejemplos a descargar, por tiempo no les comente el codigo del separador pero les dejo el archivo es el tercer archivo. Saludos y espero que les sirva, agradecer no cuesta nada, comenten si les gusto el post...










1 comentario: