Validación de la longitud del texto en un TEXTAREA de html

992 views

Skip to first unread message

Mikel Gómez

unread,

Oct 28, 2005, 5:41:33 PM10/28/05

En HTML, los TEXTAREA, o cajas de texto multilíneas, no permiten el
atributo "maxlength " para limitar el número de caracteres(a
diferencia de los input type="text"). Es por ello que, a menudo, suela
ser preciso proporcionar, a través de javascript, de un método para
limitar la entrada excesiva de texto. Adjunto y tras los enlaces de
referencia, se muestra un ejemplo sencillo de validación de longitud.

TEXTAREA - http://www.w3.org/TR/html401/interact/forms.html#edef-TEXTAREA
maxlength - http://www.w3.org/TR/html401/interact/forms.html#adef-maxlength


<html>
<head>
<script type="text/javascript">
function validarTextarea(objetoTextarea, maxLength){
if(objetoTextarea.value.length > maxLength) {
objetoTextarea.value = objetoTextarea.value.substr(0,maxLength);
alert('¡ATENCION!\n\n' +
'Se ha sobrepasado la longitud máxima permitida para el texto (' +
maxLength + ' caracteres)\n\n' +
'Se han truncado caracteres finales');
}
return false
}
</script>
</head>
<body>
<h4>Ejemplo de validación de longitud en una caja de texto (TextArea)</h4>
<form action="">
<textarea name="area" rows="10" cols="64"
onkeyup="validarTextarea(this,10)"
onmouseover="validarTextarea(this,10)"
onchange="validarTextarea(this,10)"></textarea>
<br/>
<input type="text"
value="Input para ver efecto al cambiar foco" size="64" maxlength="50">
</form>
</body>
</html>

validarlongitudtextarea.html

Mikel Gómez

unread,

Oct 28, 2005, 6:05:29 PM10/28/05

to i.focus

Olvide comentar que es conveniente el uso de los tres eventos que
aparecen en el elemento textarea del ejemplo, para validar en las
siguientes situaciones:

- onkeyup - cada vez que introducimos un carácter con el teclado.
- onmouseover - Por si pegamos texto con el ratón.
- onchange - Al cambiamos el foco tras realizar cualquier cambio.