Controle de campos de texto com Javascript

Explicação e documentação dos campos de texto e seu controle com Javascript. Incluem-se os campos de tipo text, password e hidden.

Vamos ver agora os campos onde podemos salvar cadeias de texto, ou seja, os campos de texto, password e hidden. Existe outro campo relacionado com a escritura de texto, o campo TextArea, que veremos mais adiante.

Campo Text

É o campo que obtemos ao escrever a etiqueta <INPUT type="text">. Utilizamos até este momento em vários exemplos, mas vamos parar um momento nele para descrever suas propriedades e métodos.

Propriedades do campo text

Vemos a lista de propriedades destos tipos de campo.

defaultValue
É o valor por padrão que tem um campo. O que contém o atributo VALUE da etiqueta <INPUT>.

form
Faz referência ao formulário.

name
Contem o nome deste campo de formulário

type
Contem o tipo de campo de formulário que é.

value
O texto que está escrito no campo.

Vamos ver um exemplo sobre o que pode fazer a propriedade defaultValue. Neste exemplo, temos um formulário e um botão de reset. Se clicarmos o botão de reset, o campo de texto se esvazia porque seu value de HTML era um string vazio. Mas se clicarmos o botão seguinte, chamamos a função que muda o valor por padrão desse campo de texto, de modo que ao clicar o botão de reset mostrará o novo valor por padrão.

Este é o código da página completa.

<html>
<head>
   <title>Mudar o valor por padrao</title>
   <script>
    function mudaPadrao(){
       document.meuFormulario.campo1.defaultValue = "Olá!!"
    }
   </script>
</head>

<body>
<form name="meuFormulario" action="mailto:colabore@criarweb.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="Reset">
<br>
<br>
<input type="button" value="Muda valor por padrao" onclick="mudaPadrao()">
</form>
</body>
</html>

Métodos do objeto Text

Pode-se invocar os seguintes métodos sobre os objetos tipo Text.

blur()
Retira o foco da aplicação do campo de texto.

focus()
Coloca o foco da aplicação no campo de texto.

select()
Seleciona o texto do campo.

Como exemplo vamos mostrar uma função que seleciona o texto de um campo de texto de um formulário como o da página do exemplo anterior. Para fazê-lo utilizamos dois métodos, o primeiro para passar o foco da aplicação ao campo de texto e o segundo para selecionar o texto.

function selecionaFoco(){
document.meuFormulario.campo1.focus()
document.meuFormulario.campo1.select()
}

Pode-se ver em funcionamento nesta página.

Campos Password

Estes funcionam como os hidden, com a peculiaridade que o conteúdo do campo não pode se ver escrito no campo, por isso saem asteriscos no lugar do texto.

Campos Hidden

Os campos hidden são como campos de texto que estão ocultos para o usuário, ou seja, que nã se vêem na página. São muito úteis no desenvolvimento de webs para passar variáveis nos formulários aos quais o usuário não deve ter acesso.

Colocam-se com HTML com a etiqueta <INPUT type=hidden> e se preenchem os dados com seu atributo value. Mais tarde poderemos mudar o dado que figura no campo acessando à propriedade value do campo de texto assim como fizemos antes.

document.meuFormulario.CampoHidden.value = "novo texto"

O campo hidden tem somente algumas das propriedades dos campos de texto. Teoricamente, tem a propriedade value e as propriedades que são comuns de todos os campos de formulário: name, from e type, que já foram descritos para os campos de texto.