Mundo Web - Caminando entre formularios V

CAMINANDO ENTRE FORMULARIOS (V)
por Luciano Moreno, del departamento de diseño web de BJS Software.

El objeto textarea inicialmente admite el mismo tratamiento que el objeto text, sus mismas propiedades, métodos y eventos. Pero además posee una serie de características propias originadas por su propia definición.

La apariencia del elemento textarea dentro de un formulario es la de una caja de texto de anchura y altura determinada, que posee scrolls o barras de desplazamiento propias para poder navegar por su interior. Su sintaxis dentro de un formulario es del tipo:

que como vemos lleva etiqueta de cierre, apareciendo inicialmente en la caja el texto que escribamos entre las etiquetas de apertura y cierre, y cuya apariencia en el navegador es la siguiente:

name : es la propiedad que va a asignar a cada textarea un nombre identificador para poder referirnos luego a ella y acceder a sus propiedades.
cols: que fija la anchura que va a tener el textarea, mediante el núemro de columnas de la misma. Si no se especifica este valor, el textarea aparece por defecto con una anchura estandar, que suele corresponder a 21 columnas.
rows: que fija la altura que va a tener el textarea, mediante el número de filas de la misma. Si no se especifica este valor, el textarea aparece por defecto con una altura estandar, que suele corresponder a 2 columnas.
value : en el caso de los textarea esta propiedad no deternima el contenido inicial del objeto, pero sí va a representar el contenido en cualquier momento, y al igual que con el objeto text, también posee la subpropiedad length, que representa el nº de caracteres que contiene el textarea. Para entender bien esto, vamos a escribir y esplicar el código necesario para crear un textarea que sólo permita escribir dentro 15 caracteres.El código es:

<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">

function chequea(form) {
var max=15;
if (form.comentario.value.length > max) {
alert("No puede entrar más de 15 caracteres. Por favor, entre de nuevo el texto.");
return false;
}
else return true;
}

</script>
</head>
<body bgcolor="#ffffcc">
<center>
<form name="form1" onsubmit="return chequea(this)">
Por favor, entre como máximo 15 caracteres.<br>
<textarea rows="5" cols="30" name="comentario" wrap="virtual"></textarea>
<br><input type="submit" value="enviar">
</form>
</center>
</body>
</html>ikjppkj

En primer lugar definimos la función chequea, que admite como parámetro el nombre del formulario sobre el que va a operar, y si nos fijamos en el contenido del botón submit vemos que llamamos a la función pasándole como parámetro la palabra clave de JavaScript this, que representa el objeto en la que está contenida; es decir, como el botón submit está contenido en el formulario form1, la palabra clave this hace representa en este caso a este formulario y a su documento padre, por lo que equivale a escribir document.form1. Luego definimos la variable max, que va a definir el número máximo de caracteres que queremos en la caja. Seguidamente vemnos si el número de caracteres introducidos en el textarea, determinado por this.comentario.value.length, es mayor que el fijado por la variable max (15 en este caso). Si es así lanzamos un mensaje de alerta al usuario comunicándole que ha sobrepasado el nº de caracteres permitido, y luego escribimos return false, ya que como hemos llamado a la función desde un botón submit si no devolvemos false los datos del formulario serán enviados. Si la condición de longitudes no se cumple, es decir, si el nº de caracteres es menor que 15, dejamos que el proceso de envío siga adelante sin lanzar ningún mensaje, y esto se consigue retornando true.

podemos ver el cógigo trabajando en el siguiente ejemplo.
disabled : esta propiedad bloquea el textarea de tal forma que el texto que contiene se colorea de grís y no se puede cambiar el mismo ni escribir nada nuevo en el interior de la caja.
readonly : que actúa de forma análoga a disabled, bloqueando el texto contenido de forma que no se puede modificar, pero que no pone el textarea en color grís.

El objeto textarea posee los siguientes métodos:

select () : este método selecciona el texto contenido en el textarea, situándolo con color blanco sobre un fondo azul. Es el usado en las páginas que muestran código JavaScript de ejemplo para que podamos seleccionarlo al pulsar sobre el texto, y así copiarlo fácilmente. La forma de usar el método select() en este caso vamos a verla en un ejemplo:

<html>
<head>
</head>
<body>
<center>
Para copiar el contenido de la caja pulse sobre ella con el botón derecho y
seleccione "copiar" en el menú contextual.
<form>
<textarea cols=15 rows=10 onFocus="this.select()">Esto es un ejemplo de cómo se selecciona
el texto de una caja al coger esta el foco
</textarea>
</form>
</center>
</body>
</html>

que vemos funcionando pinchando aquí.
focus(): este método sitúa el cursor sobre el textarea.

Por otra parte, estos objetos poseen los siguientes eventos:

onFocus : que se activa al recibir el foco el textarea, bien porque se pinche dentro con el ratón, bien por acceder al mismo mediante el tabulador. Vamos a ver cómo podemos usar un textarea para explicar al usuario qué debe introducir en los campos de formulario, cosa que conseguimos cambiando el contenido del textarea cuando otro elemento recibe el foco:

<html>
<head>
</head>
<body onLoad="document.form1.nombre.focus()">
<form name="form1">
Nombre:<input type="text" name= "nombre"onFocus="this.form.explica.value='Introduce tu nombre'">
Apellidos:<input type="text" name= "apellidos"onFocus="this.form.explica.value='Introduce tus apellidos'">
<textarea name="explica" cols="25" rows="1">Introduce tu nombre</textarea>
</form>
</body>
</html>

que vemos en acción en el siguiente ejemplo.
onBlur : el evento onBlur se lanza cuando el textarea pierde el foco despúes de haberlo recibido. Al igual que con el objeto text, su principal uso es el de modificar, corregir o validar el texto contenido ene el textarea antes de ser enviados los datos.
onClick : que se lanza al pinchar con el ratón en el interior del texarea.
onMouseOver , onmouseOut, ondblClick, onkeyPress,onKeyUp : estos eventos son aceptados por este objeto, al igual que los demás objetos de formulario.

Vamos a ver un ejemplo parecido al primero de este capítulo, en el que vamos a permitir un máximo de caracteres en el textarea, y además vamos a mostrar al usuario el nº máximo de ellos que le van quedando para poner, es decir, vamos a implementar un contador de cuenta atrás. Vamos a ver el código y luego lo explicamos:

<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">

function contador (campo, cuentacampo, limite) {
if (campo.value.length > limite) campo.value = campo.value.substring(0, limite);
else cuentacampo.value = limite - campo.value.length;
}

</script>
</head>
<body>
<center>
<form name="form1">
sólo puedes entrar 125 caracteres.
<textarea name="mensaje" wrap=physical cols="28" rows="4" onKeyDown="contador(this.form.mensaje,this.form.remLen,125);" onKeyUp="contador(this.form.mensaje,this.form.remLen,125);"></textarea>
<input type="text" name="remLen" size="3" maxlength="3" value="125" readonly>te quedan todavía
</form>
</center>
</body>
</html>

Vamos a definir la función contador, que va a manejar 3 parámetros, que van a ser:

1) campo: representa al textarea sobre el que queremos que actúe la función, que se corresponde en el ejemplo con this.form.mensaje.

2) cuentacampo : que representa la caja de texto en la que vamos a colocar el contador de cuenta atrás, representada en nuestro formulario por this.form.remLen.

3) limite : que va a determinar el nº máximo de caracteres que vamos a permitir en el textarea.

Las instrucciones que le damos a la función son:

a) if (campo.value.length > limite) campo.value = campo.value.substring(0, limite); este código es una condición que le dice a la función que si el la longitud de la propiedad value del campo que le pasemos como primer argumento ( es decir, el número de caracteres introducido en el textarea) es mayor que el límite pasado como tercer argumento, entonces sólo debe tomar los caracteres comprendidos entre el primero (0) y el marcado por el límite (125), con lo que aunque escriba el usuario más de 125 sólo se considerarán los 125 primeros. Esta instrucción sólo maneja pués el caso de que haya más de 125 caracteres, y no actúa para nada con el contador de cuenta atrás.

2) else cuentacampo.value = limite - campo.value.length; que trata el caso en que todavía no se superen los 125 caracteres en el textarea, y le dice a la función que en ese caso el valor que aparezca en el campo que le pasemos como argumento cuentacampo, que en nuestro caso corresponde a la caja de texto remLen, debe ser igual al valor del límite establecido menos el nñumero de caracteres que haya introducidos en el textarea, con lo que consegimos el efecto de cuenta atrás.

Ahora bien, para que la función actúe dinámicamente debemos llamarla cada vez que el usuario pulse una tecla al introducir un caracter en el textarea, y también cuando la tecla ha sido pulsada, para que no nos pasemos del límite de 125 caracteres establecido. Por eso llamamos a la función mediante los eventos onKeyDown y onKeyUp, es decir, cada vez que el usuario pulsa o suelta una pieza del teclado.

Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8