Propriedades da caixa de texto usando Javascript

Escrito por sue smith Google | Traduzido por daniel coutinho
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Propriedades da caixa de texto usando Javascript
Formulários de sites podem incluir dois tipos diferentes de elemento de texto (Hemera Technologies/AbleStock.com/Getty Images)

Formulários Web permitem que alguns sites capturem informações inseridas pelo usuário. Pode-se usar vários tipos de elementos de entrada, projetados para capturar dados, inclusive de texto. Dois deles são utilizados para a captura de texto através de formulários. O elemento de entrada com o seu tipo de atributo definido como "text" cria um campo na página, enquanto que o de área de texto cria um campo de entrada de texto multilinha. Funções do JavaScript podem criar e definir propriedades.

Outras pessoas estão lendo

Elementos

Formulários Web podem incluir um ou mais elementos da caixa de texto dentro de uma página. O seguinte exemplo de código "HTML" demonstra a criação de um elemento de entrada de campo de texto:

<input type="text" id="textinfo" value="Text input content" />

Esse cria um campo de entrada de texto de uma única linha na página. O código a seguir demonstra um elemento de área de texto:

<textarea rows="5" cols="10" id="multitextinfo"> Text area content </textarea>

Ambos os itens da caixa de texto exibirão uma mensagem quando o usuário visualizar a página. No elemento de entrada de texto, o conteúdo aparece como o atributo de valor, enquanto que no elemento de área de texto, ele aparece como o elemento de conteúdo entre as "tags" de entrada e saída.

Funções JavaScript

Páginas com formulários Web podem usar funções de JavaScript para realizar processos interativos. Observe o código de exemplo a seguir para a função JavaScript inserida na seção principal de uma página:

<script type="text/javascript"> function textboxProperties() { //implement the function } </script>

O código dentro dessa função executa a propriedade de caixa de texto. Muitos sites executam funções de JavaScript na interação com o usuário. A entrada do exemplo executa essa função:

<input type="button" value="text properties" onclick="textboxProperties()" />

Executando propriedades

O código JavaScript pode adquirir informações sobre um elemento da caixa de texto. O seguinte exemplo demonstra o código de implementação da função:

alert(document.getElementById("textinfo").value); alert(document.getElementById("multitextinfo").innerHTML);

A primeira linha envia o valor do elemento de entrada de texto, adquirindo primeiro uma referência e, em seguida acessando o campo do valor. A segunda linha envia o conteúdo do elemento da área de texto utilizando o "innerHTML", que é qualquer texto que aparece entre os sinais de entrada e saída.

Definir propriedades

Funções de JavaScript podem definir as propriedades dos elementos de texto, como o seguinte exemplo de código demonstra:

document.getElementById("textinfo").value="New content"; document.getElementById("multitextinfo").innerHTML="More new content";

Estas linhas substituem o conteúdo do texto atual de cada elemento. O JavaScript também pode obter e definir as linhas e colunas em uma área de texto, ou várias propriedades do elemento de entrada, incluindo seu tamanho e tipo. Os desenvolvedores podem usar estas funções para criar efeitos interativos enquanto os usuários estão interagindo com elementos de entrada do formulário.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível