Control de introducción de caracteres de un campo de texto con Javascript

Podemos impedir con Javascript que los caracteres que el usuario teclea en un campo de texto de un formulario aparezcan.
Esto puede ser útil para campos que sólo admitar números o letras.

Por ejemplo, vamos a hacer que en un campo de texto de un formulario sólo se permitan meter números decimales del tipo 9999.99:

Necesitamos una función en JavaScript (por ejemplo):

function fieldNumber (objeto)
{
var valorCampo;
var evento_key = window.event.keyCode;
var numPosPunto = 0;
var strParteEntera = "";
var strParteDecimal = "";
var NUM_DECIMALES = 2;

switch (evento_key)
{
case 48:
case 49:
case 50:
case 51:
case 52:
case 53:
case 54:
case 55:
case 56:
case 57:
case 46:
break;
default:
window.event.keyCode = 0;
return false;
}

valorCampo = objeto.value;
if (evento_key == 46)
if (valorCampo.indexOf(".") != -1)
{
window.event.keyCode = 0;
return false;
}
/* Sólo puede teclear el número de decimales indicado en NUM_DECIMALES */
if ((numPosPunto = valorCampo.indexOf(".")) != -1)
{
strParteEntera = valorCampo.substr(0,(numPosPunto - 1));
strParteDecimal = valorCampo.substr((numPosPunto + 1), valorCampo.length)
if (strParteDecimal.length > (NUM_DECIMALES - 1))
{
window.event.keyCode = 0;
return false;
}
}
return true;
}


Tendremos una página con el formulario y la caja de texto. Tendremos que llamar a la función "fieldNumber" en el evento onkeypress:

<input type="text" name="txtImporte" onkeypress="fieldNumber(this)">

Si tenéis algun problema no dudéis en consultármelo mandándome un mail a iszori@hotmail.com

Compartir

Comentarios

HSimpson

20/12/2007
Parece que no funciona en FIrefox 2.0.0.11

Ricardo Grandon

21/12/2007
Si bien este tipo de "seuridad" en el envio de los datos no es muy fiable ya que haciando una simulacuón de envio se puede "saltar" este tipo de seguridades por lo cual es bueno tener una función que lea los datos antes de agregarlos o hacer calculos con ellos y no en el formulario.
no digo que validar los formularios no sea util pero es para la opción grafica no para la seguridad por si alguno quiere implementarlo contra Bugs o inyection.
Me queda decir que estas saluciones mas graficas son muy utiles para interfaces de usuarios con poca experiencia y facilitan mucho el uso de las paginas de formularios.

gracias por el dato!

Meri

22/12/2008
Esta funcion es justo lo que necesitaba! :D Te amoo!

Antonio

07/8/2010
prueba
uno dos y tres