Controle de elementos Textarea em Javascript

Os elementos textarea são os campos que permitem introduzir várias linhas de texto. Aprendemos a controlá-los com programação Javascript.

Para acabar de descrever todos os elementos de formulários vamos ver o objeto textarea que é um elemento que apresenta um lugar para escrever texto, igual que os campos text, mas com a particularidade que podemos escrever várias linhas de uma só vez.

O campo textarea pode ser visto a seguir.

Um campo textarea se consegue com a etiqueta <TEXTAREA>. Com o atributo name podemos dar um nome para acessar ao campo textarea mediante Javascript. Outros atributos interessantes são cols e rows que servem para indicar a largura e a altura do campo textarea em caracteres, cols indica o número de colunas e rows o de filas. Embora não se possa acesa-los com Javascript. O valor padrão de um campo textarea se coloca entre as etiquteta <TEXTAREA> e seu correspondente fechamento.

Propriedades de textarea

Pode-se ver uma lista das propriedades disponíveis em um textarea a seguir, que são os mesmo que um campo de texto.

defaultValue
Que contém o valor padrão do textarea.

value
Que contém o texto que está escrito no textarea.

Além disso, têm as conhecidas propriedades de elementos de formulário form, name e type.

Métodos de textarea

Vejamos uma lista dos métodos, que são os mesmos que em um campo de texto.

blur()
Para tirar o foco da aplicação do textarea.

focus()
Para colocar o foco da aplicação no textarea.

select()
Seleciona o texto do textarea.

Vamos ver um exemplo a seguir que apresenta um formulário que tem um textarea e um botão. Ao apertar o botão conta-se o número de caracteres e coloca-se em um campo de texto.

Para acessar ao número de caracteres fazemos a partir da propriedade value do objeto textarea. Como value contém um string podemos acessar à propriedade length que têm todos os strings para averiguar sua longitude.

O código da página pode ser visto aqui.

<html>
<head>
    <title>Exemplo textarea</title>
<script>
function conta(){
    numCaracteres = document.formul.texto.value.length
    document.formul.numCaracteres.value = numCaracteres
}
</script>
</head>
<body>
<form name="formul">
<textarea name=texto cols=40 rows=3>
Este é o texto padrão
</textarea>
<br>
<br>
Número de caracteres <input type="Text" name="numCaracteres" size="4">
<br>
<br>
<input type=button value="Conta caracteres" onclick="conta()">
</form>
</body>
</html>

O exemplo funcionando pode ser visto em uma página independente.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo

Categorias relacionadas

Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:

Javascript

Comentário sem rever

Acrescentar um comentário do artigo

Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.

Foram econtrados 2 comentários sem rever