Como obter o valor da área de texto em JavaScript?

No processo de projetar páginas ou sites responsivos da Web, é necessário solicitar ao usuário dos dados inseridos para garantir os dados inseridos corretos. Por exemplo, confirmando os e -mails e senhas digitadas. No outro caso, registrar um erro ou aviso sobre uma opção selecionada que pode levar a algumas conseqüências sérias i.E vírus etc. Em tais casos-cenários, obter o valor da área de texto em JavaScript é muito útil para manter a privacidade de dados.

Este artigo explicará as abordagens para obter o valor da área de texto em JavaScript.

Como obter o valor da área de texto em JavaScript?

O valor da área de texto pode ser buscado em JavaScript usando as seguintes abordagens:

• ““getElementById ()”Método.
• ““addEventListener ()”Método.
• ““jQuery”.

Abordagem 1: Obtenha o valor da área de texto em JavaScript usando o método getElementById ()

O "getElementById ()”Método acessa um elemento com o especificado“eu ia”.Este método pode ser implementado para buscar o campo de texto de entrada e retornar o valor inserido nele.

Sintaxe

documento.getElementById (elemento)

Na sintaxe dada:

• ““elemento" refere-se a "eu ia”Para ser buscado contra o elemento específico.

Exemplo
Vamos dar uma olhada no exemplo a seguir:

Vamos aplicar as etapas a seguir no código abaixo:

Obtenha o valor da área de texto em JavaScript

Digite algo:
Obter valor

Execute as seguintes etapas:

• Na primeira etapa, especifique o cabeçalho declarado.
• Depois disso, inclua o campo de texto de entrada com o especificado “eu ia" e "espaço reservado" valor.
• Além disso, crie um botão com um anexo “ONCLICK”Evento redirecionando para a função textAeAvalue ()

Vamos avançar para a parte JavaScript do código:

No código JavaScript acima:

• Declare uma função chamada “textareAvalue ()”.
• Em sua definição, acesse o campo de texto de entrada por seu ID especificado usando o “getElementById ()”Método.
• Além disso, aplique o “valor”Propriedade para recuperar o valor do texto inserido.
• Finalmente, exiba o valor da área de texto por meio do “alerta”Caixa de diálogo.

Saída

Na saída acima, pode -se observar que o valor inserido é buscado via caixa de diálogo de alerta.

Abordagem 2: Obtenha o valor da área de texto em JavaScript usando o método addEventListener ()

O "addEventListener ()”O método é usado para associar um“evento”Com um elemento. Este método pode ser utilizado para anexar um evento à função, de modo que o valor da área de texto seja buscado em cada entrada lado a lado no console.

Sintaxe

elemento.addEventListener (evento, função, exec)

Na sintaxe acima:

• ““evento”Aponta para o nome do evento.
• ““função”Indica a função a ser executada no gatilho de um evento.
• ““exec”É o parâmetro opcional.

Exemplo
Vamos seguir o exemplo abaixo do dado passo a passo:

Digite algo:

No snippet de código acima:

• Especifique a etiqueta declarada. Além disso, aloque o “Textarea”Elemento com o valor especificado de“eu ia" e "espaço reservado”E ajuste suas dimensões também.
• Na parte JavaScript do código, acesse a textarea especificada na etapa anterior e exiba -a usando o “valor" propriedade.
• Na próxima etapa, anexe um evento “texto”Para o buscado“Área de texto”Usando o“addEventListener ()”Método e aplique -o à função“textareAvalue ()”. O "evento”Em seu argumento, passa informações sobre o evento que é acionado.
• Isso resultará no registro de cada um dos valores de texto inseridos lado a lado.

Saída

Da saída acima, o “buscar”De cada um dos valores de texto inseridos podem ser observados.

Abordagem 3: Obtenha o valor da área de texto em JavaScript usando jQuery

““jQuery”Pode ser aplicado para acessar o campo de texto de entrada e acionar suas funcionalidades assim que o modelo de objeto de documento (DOM) for carregado.

Exemplo
Vamos seguir o exemplo abaixo:

Digite algo:
Obter valor

Nas linhas de código acima, execute as seguintes etapas:

• Inclua a biblioteca jQuery para aplicar seus métodos.
• Especifique o "entrada“Como campo de texto com os valores especificados de“eu ia" e "espaço reservado”Conforme discutido antes.
• Além disso, crie um botão para obter o valor no botão Clique.

Passe para a parte JavaScript do Código:

Siga as etapas declaradas:

• Aplicar o "preparar()”Método para aplicar os métodos adicionais no DOM carregado.
• Acesse o botão criado e anexe o “clique()”Método para ele, que executará a função declarada em seu parâmetro.
• O método click () acessará o campo de texto de entrada especificado e registrará o valor de texto inserido no console.

Saída

Portanto, o valor do tipo é registrado no console.

Essas eram todas as maneiras diferentes de obter o valor da área de texto com a ajuda do JavaScript.

Conclusão

O "getElementById ()”Método, o“addEventListener ()”Método ou o“jQuery”Pode ser utilizado para obter o valor da área de texto em JavaScript. O método getElementById () pode ser implementado para acessar o campo de texto de entrada e exibir o valor da área de texto inserida via alerta. O método addEventListener () pode ser utilizado para anexar um “entrada”Evento que obterá o valor do texto em cada entrada lado a lado. O jQuery pode ser aplicado para acessar o botão diretamente e recuperar o valor do texto inserido no botão Clique no console. Este tutorial explica como obter o valor da área de texto em JavaScript.