Você está em: Home > Javascript/AJAX/DHTML > Visualizando artigo

Iniciando no Javascript: Controle de elementos Textarea em Javascript

Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/380.php

[ Indicar a um amigo ] [ Translate to english ] [ Imprimir ]

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.

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>