Control de elementos Textarea en Javascript

  • Por
Los elementos textarea son los campos que permiten introducir varias líneas de texto. Aprendemos a controlarlos con programación Javascript.
Para acabar de describir todos los elementos de formularios vamos a ver el objeto textarea que es un elemento que presenta un lugar para escribir texto, igual que los campos text, pero con la particularidad que podemos escribir varias líneas a la vez.

El campo textarea se puede ver a continuación.

Un campo textarea se consigue con la etiqueta <TEXTAREA>. Con el atributo name le podemos dar un nombre para acceder al campo textarea mediante Javascript. Otros atributos interesantes son cols y rows que sirven para indicar la anchura y altura del campo textarea en caracteres, cols indica el número de columnas y rows el de filas. aunque no se puede acceder a ellos con Javascript. El valor por defecto de un campo textarea se coloca entre las etiquteta <TEXTAREA> y su correspondiente cierre.

Propiedades de textarea

Se puede ver una lista de las propiedades disponibles en un textarea a continuación, que son los mismos que un campo de texto.

defaultValue
Que contiene el valor por defecto del textarea.

value
Que contiene el texto que hay escrito en el textarea.

Además tiene las conocidas propiedades de elementos de formulario form, name y type.

Métodos de textarea

Veamos una lista de los métodos, que son los mismos que en un campo de texto.

blur()
Para quitar el foco de la aplicación del textarea.

focus()
Para poner el foco de la aplicación en el textarea.

select()
Selecciona el texto del textarea.

Vamos a ver un ejemplo a continuación que presenta un formulario que tiene un textarea y un botón. Al apretar el botón se cuenta el número de caracteres y se coloca en un campo de texto.

Para acceder al número de caracteres lo hacemos a partir del la propiedad value del objeto textarea. Como value contiene un string podemos acceder a la propiedad length que tienen todos los strings para averiguar su longitud.

El código de la página se puede ver aquí.

<html>
<head>
    <title>Ejemplo textarea</title>
<script>
function cuenta(){
    numCaracteres = document.formul.textito.value.length
    document.formul.numCaracteres.value = numCaracteres
}
</script>
</head>
<body>
<form name="formul">
<textarea name=textito cols=40 rows=3>
Este es el texto por defecto
</textarea>
<br>
<br>
Número de caracteres <input type="Text" name="numCaracteres" size="4">
<br>
<br>
<input type=button value="Cuenta caracteres" onclick="cuenta()">
</form>
</body>
</html>

El ejemplo funcionando se puede ver en una página independiente.

Para quien desee profundizar, tenemos un artículo interesante que amplía el ejemplo anterior. Se trata de una cuenta de los caracteres del textarea a la vez que se está escribiendo dentro del campo. Se realiza gracias al tratamiento de eventos. Se puede ver el artículo en la dirección http://www.desarrolloweb.com/articulos/1348.php

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Raul

19/5/2005
Por qué en firefox el texto desaparece por la izquierda y no por arriba como sucede con explorer?

jefer1115

20/6/2010
inquietud
hola compañero he seguido los materiales desde 0 hasta ahora, y pues en mi proceso me he encontrado con un inconveniente a la hora de validar las opciones de formulario select. n ohe encontrado la maner de hacer esto.. dejo un ejemplo. pero basicamente es lo mismo lo que quiero hacer pero cambianle algunas cosas por eso no saco la fuente de ahi. http://www.fortunecity.es/felices/barcelona/146/3ds/tutores/calculograficoresitivo_files/calculograficoresitivo.htm

breynerhy

27/10/2014
javascript
muy buenas las explicaciones pero tengo una pregunta
¿quiero saber como capturar un comentario escrito en un textarea y mostrarlo en otro textarea, es que quiero crear como especie de un foro quiero saber si eso es posible usando javascript.
GRACIAS