Restringir caracteres en campos con JavaScript

3 de Octubre - en JavaScript

Cuando se crean formularios web, en ciertos campos de texto es necesario restringir los caracteres que el usuario pueda ingresar, como lo pueden ser campos numéricos, uso de ciertos caracteres, etc. en este tutorial veremos algunas formas prácticas de aplicarlo a campos de texto haciendo uso de JavaScript y atributos HTML.

Restringir caracteres en campos con JavaScript

Permitir solo números en campo de texto Input

Una forma rápida para restringir el uso de caracteres es llamando una función de JavaScript en el evento onkeyup de los controles input, dicha función se encargara de filtrar los caracteres aceptados y retornara el valor corregido.

Codigo HTML

<input type="text"  value="" onkeyup="this.value=Numeros(this.value)" />

Codigo JavaScript:

function Numeros(string){//Solo numeros
    var out = '';
    var filtro = '1234567890';//Caracteres validos
	
    //Recorrer el texto y verificar si el caracter se encuentra en la lista de validos 
    for (var i=0; i<string.length; i++)
       if (filtro.indexOf(string.charAt(i)) != -1) 
             //Se añaden a la salida los caracteres validos
	     out += string.charAt(i);
	
    //Retornar valor filtrado
    return out;
} 

Permitir solo letras y números

Se utilizara la misma función para filtrar letras y números en el campo de texto

function NumText(string){//solo letras y numeros
    var out = '';
    //Se añaden las letras validas
    var filtro = 'abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ1234567890';//Caracteres validos
	
    for (var i=0; i<string.length; i++)
       if (filtro.indexOf(string.charAt(i)) != -1) 
	     out += string.charAt(i);
    return out;
}

Reemplazar caracteres en un campo de texto

Para reemplazar un carácter específico, se usaran dos funciones en conjunto, se utilizara Split para para separar el texto en un array utilizando el carácter a reemplazar como separador, posteriormente se usara la función join para unir el array introduciendo como separadores el nuevo carácter.

En este ejemplo se reemplazaran los espacios del texto por guiones medios.

function Espacios(string){
    //Uso de split y join para buscar y reemplazar caracteres
    //Reemplazando espacios por guiones
    return string.split(" ").join("-");
}

Transformar a mayúsculas todos los caracteres

function Mayuculas(tx){
	//Retornar valor convertido a mayusculas
	return tx.toUpperCase();
}

Validando y formateando un campo para introducir un número de tarjeta

Este campo permitirá introducir un número de tarjeta de crédito, además agregara un espacio cada cuadro caracteres para una mejor visualización. El campo de texto estará restringido a un máximo de 16 números de la tarjeta (más 3 espacios de los separadores).

HTML:

<!-- Se limitan los caracteres maximos con maxlength -->
<!-- event: datos del evento, utilizado para leer codigo de tecla precionada -->
<!-- this: identificador el input -->
<label>Tarjeta de credito:</label>
<input type="text"  value="" maxlength="19" onkeyup="Card(event, this)" />

JavaScript:

function Card(event, el){//Validar nombre	
    //Obteniendo posicion del cursor 
    var val = el.value;//Valor de la caja de texto
    var pos = val.slice(0, el.selectionStart).length;
	
    var out = '';//Salida
    var filtro = '1234567890';
    var v = 0;//Contador de caracteres validos
	
    //Filtar solo los numeros
    for (var i=0; i<val.length; i++){
       if (filtro.indexOf(val.charAt(i)) != -1){
	     v++;
	     out += val.charAt(i);		   
	     //Agregando un espacio cada 4 caracteres
	     if((v==4) || (v==8) || (v==12))
	         out+=' ';
	   }
    }
    //Reemplazando el valor
    el.value = out;
	
    //En caso de modificar un numero reposicionar el cursor
    if(event.keyCode==8){//Tecla borrar precionada
        el.selectionStart = pos;
        el.selectionEnd = pos;
    }
}

Resultado:

Campo numerio en HTML y JavaScript

 

Ejemplo

DemoDescargar
Etiquetas
JavaScript
Compartir