Restringir el tamaño de un campo de texto
Es una escasez de campos de texto de formato, que no puede limitar el número de caracteres que se pueden introducir.
Esto se logrará con JavaScript. Debemos recordar el trabajo de algunos eventos( onkeypress, onclick eta onsubmit) se pueden bloquear utilizando false
<textarea onkeypress="return false;"></textarea>
El navegador no responde al teclado, por lo que no escribe en el campo de texto.
Por lo tanto, controlaríamos el límite del número de caracteres:
function limitar(maximoCaracter) { var elemento = document.getElementById("texto"); if(elemento.value.length >= maximoCaracter ) {
return false; } else { return true; } } <textarea id="texto" onkeypress="return limitar(100);"></textarea>
Ejemplo
El ejemplo anterior, podemos mejorarlo. Indicaremos cuántos caracteres quedan a escribir para el usuario. Además, vamos a permitir al usuario utilizar Backspace, Supr y teclas de flecha horizontal.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo - Limitar el marco de caracteres para un área de prueba</title> <style type="text/css"> body {font-family: arial, helvetica;} </style> <script type="text/javascript">function limita(elEvento, maximoCaracteres) { var elemento = document.getElementById("texto"); // Obtener la tecla pulsada var evento = elEvento || window.event; var codigoCaracter = evento.charCode || evento.keyCode; // Permitir utilizar las teclas con flecha horizontal if(codigoCaracter == 37 || codigoCaracter == 39) { return true; } // Permitir borrar con la tecla Backspace y con la tecla Supr. if(codigoCaracter == 8 || codigoCaracter == 46) { return true; } else if(elemento.value.length >= maximoCaracteres ) { return false; } else { return true; }} function actualizaInfo(maximoCaracteres) { var elemento = document.getElementById("texto"); var info = document.getElementById("info"); if(elemento.value.length >= maximoCaracteres ) { info.innerHTML = "Máximo "+maximoCaracteres+" caracteres"; } else { info.innerHTML = "Puedes escribir hasta "+(maximoCaracteres-elemento.value.length)+" caracteres adicionales"; }} </script> </head> <body> <div id="info">Máximo 100 caracteres</div> <textarea id="texto" onkeypress="return limita(event, 100);" onkeyup="actualizaInfo(100)" rows="6" cols="30"></textarea> </body> </html>
function permite(elEvento, permitidos) { // Variables que definen los caracteres permitidos var numeros = "0123456789"; var caracteres = " abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ"; var numeros_caracteres = numeros + caracteres; var teclas_especiales = [8, 37, 39, 46]; // 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha // Seleccionar los caracteres a partir del parámetro de la función switch(permitidos) { case 'num': permitidos = numeros; break; case 'car': permitidos = caracteres; break; case 'num_car': permitidos = numeros_caracteres; break; } // Obtener la tecla pulsada var evento = elEvento || window.event; var codigoCaracter = evento.charCode || evento.keyCode; var caracter = String.fromCharCode(codigoCaracter); // Comprobar si la tecla pulsada es alguna de las teclas especiales // (teclas de borrado y flechas horizontales) var tecla_especial = false; for(var i in teclas_especiales) { if(codigoCaracter == teclas_especiales[i]) { tecla_especial = true; break; } } // Comprobar si la tecla pulsada se encuentra en los caracteres permitidos // o si es una tecla especial return permitidos.indexOf(caracter) != -1 || tecla_especial;} // Sólo números<input type="text" id="texto" onkeypress="return permite(event, 'num')" /> // Sólo letras<input type="text" id="texto" onkeypress="return permite(event, 'car')" /> // Sólo letras o números<input type="text" id="texto" onkeypress="return permite(event, 'num_car')" />
Si los valores incluidos por el usuario son válidos o no, y si hay un error, informe de ellos.
<form action="" method="" id="" name="" onsubmit="return validacion()"> ... </form>
function validacion() { if (Las primeras condiciones que deben cumplirse) { // No se cumplen... alert('[ERROR] El valor del campo debe ser...'); return false; } else if (Las segundas condiciones que deben cumplirse) {
// No se cumplen...
alert('[ERROR] El valor del campo debe ser...'); return false;
} ...
else if (Las últimas condiciones que deben cumplirse) {
// No se cumplen...
alert('[ERROR] El valor del campo debe ser...'); return false;
return true; }
La eficacia de esta función es válida con onsubmit
onsubmit="return validacion()"
Si no se cumplen todos los valores, el contenido del formulario no se envía.
Prohibir dejar un campo vacio
valor = document.getElementById("campo").value;if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
return false; }
Los últimas expresiones regulares comprueban que el campo no está lleno de blanco.
7.3.2. Comprobar que el campo está compuesto de números
valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false; }
isNaN() Examina el número que es apropiado o inadecuado. Cuando es apropiado, false
isNaN() ejemplos:
isNaN(3); // false isNaN("3"); // false isNaN(3.3545); // false isNaN(32323.345); // false isNaN(+23.2); // false isNaN("-23.2"); // false isNaN("23a"); // true isNaN("23.43.54"); // true
<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option></select>
indice = document.getElementById("opciones").selectedIndex;if( indice == null || indice == 0 ) { return false; }
selectedIndex Por propiedad, verificaremos si es o no válido, y también lo veremos de manera diferente. No está permitido como la primera opción como válida.
valor = document.getElementById("campo").value;if( !(/^\w+([.-]\w+)*@\w+([.-]\w+)*\.\w{2,4}$/.test(valor)) ) {
return false; }
3.5. Comprobar fecha
var anyo = document.getElementById("anyo").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value; valor = new Date(anyo, mes,dia); if( !isNaN(valor) ) { return false; }
3.6. Verificar NAN
valor = document.getElementById("campo").value;var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
if( !(/^\d{8}[A-Z]$/.test(valor)) ) { return false; }
if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) { return false; }
3.7. Verificar telefono
El script siguiente comprueba que consta de 9 números continuos (sin guión y número)
valor = document.getElementById("campo").value;if( !(/^\d{9}$/.test(valor)) ) { return false; }
Expresiones regulares:
elemento = document.getElementById("campo");if( !elemento.checked ) { return false; }
Comprobar todas las casillas que están seleccionadas,
formulario = document.getElementById("formulario");for(var i=0; i<formulario.elements.length; i++) {
var elemento = formulario.elements[i];
if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } } }
3.9. Comprobar las seleccionadas en un Radiobutton
opciones = document.getElementsByName("opciones"); var seleccionada = false;for(var i=0; i<opciones.length; i++) { if(opciones[i].checked) { selecionada= true; break; } } if(!seleccionada) { return false; }