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 obtido em JavaScript usando as seguintes abordagens:
- “ getElementById() ” método.
- “ addEventListener() ” método.
- “ jQuery ”.
Abordagem 1: obter o valor da área de texto em JavaScript usando o método getElementById()
O ' getElementById() ” acessa um elemento com o especificado “ Eu iria ”.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 iria ” a ser buscado contra o elemento específico.
Exemplo
Vejamos o seguinte exemplo:
Vamos aplicar os seguintes passos no código abaixo:
< h3 > Obter valor da área de texto dentro JavaScript h3 >
Digite algo : < tipo de entrada = 'texto' Eu iria = 'TXT' espaço reservado = 'Digite o texto...' >
< botão ao clicar = 'textareaValor()' > Obter valor botão >
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 iria ' e ' espaço reservado ' valor.
- Além disso, crie um botão com um “ ao clicar ” evento redirecionando para a função textareaValue()
Vamos avançar para a parte JavaScript do código:
< roteiro >função textareaValue ( ) {
deixar pegue = documento. getElementById ( 'TXT' ) . valor
alerta ( pegue )
}
roteiro >
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 ” para recuperar o valor de texto inserido.
- Por fim, exiba o valor da área de texto por meio do botão “ alerta ” caixa de diálogo.
Resultado
Na saída acima, pode-se observar que o valor inserido é obtido por meio da caixa de diálogo de alerta.
Abordagem 2: obtenha o valor da área de texto em JavaScript usando o método addEventListener()
O ' addEventListener() ” é usado para associar um “ evento ” com um elemento. Esse método pode ser utilizado para anexar um evento à função de forma que o valor da área de texto seja obtido em cada entrada lado a lado no console.
Sintaxe
elemento. addEventListener ( evento , função , executivo )Na sintaxe acima:
- “ evento ” aponta para o nome do evento.
- “ função ” indica a função a ser executada no acionamento de um evento.
- “ executivo ” é o parâmetro opcional.
Exemplo
Vamos seguir o exemplo abaixo dado passo a passo:
< ID da área de texto = 'txtárea' linhas = '5' cols = '25' espaço reservado = 'Inserir texto...' > área de texto >
< tipo de script = 'texto/javascript' >
deixar pegue = documento. getElementById ( 'txtarea' ) ;
console. registro ( pegue . valor ) ;
pegue . addEventListener ( 'entrada' , função textareaValue ( evento ) {
console. registro ( evento. alvo . valor ) ;
} ) ;
roteiro >
No trecho de código acima:
- Especifique o rótulo indicado. Além disso, aloque o “ área de texto ” elemento com o valor especificado de “ Eu iria ' e ' espaço reservado ” e ajuste suas dimensões também.
- Na parte JavaScript do código, acesse a área de texto especificada na etapa anterior e exiba-a usando o botão “ valor ' propriedade.
- Na próxima etapa, anexe um evento “ texto ” para o buscado “ área de texto ” usando o “ addEventListener() ” método e aplicá-lo à 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.
Resultado
Da saída acima, o “ buscando ” de cada um dos valores de texto inseridos podem ser observados.
Abordagem 3: obter 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 Document Object Model (DOM) for carregado.
Exemplo
Vamos seguir o exemplo abaixo dado:
Digite algo : < tipo de entrada = 'texto' Eu iria = 'TXT' espaço reservado = 'Digite o texto...' >
< botão > Obter valor botão >
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 iria ' e ' espaço reservado ” como discutido antes.
- Além disso, crie um botão para obter o valor ao clicar no botão.
Vá para a parte JavaScript do código:
< roteiro >$ ( documento ) . pronto ( função ( ) {
$ ( 'botão' ) . clique ( função ( ) {
console. registro ( $ ( 'Entrada de texto' ) . val ( ) ) ;
} ) ;
} ) ;
roteiro >
Siga os passos indicados:
- Aplicar o ' pronto() ” para aplicar os métodos adicionais no DOM carregado.
- Acesse o botão criado e anexe o “ clique() ” a ele que executará a função indicada 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.
Resultado
Portanto, o valor do tipo é registrado no console.
Essas foram todas as diferentes maneiras de obter o valor da área de texto com a ajuda do JavaScript.
Conclusão
O ' getElementById() ” método, o “ addEventListener() ” ou o método “ 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 inserido por meio de alerta. O método addEventListener() pode ser utilizado para anexar um “ entrada ” 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 digitado ao clicar no botão no console. Este tutorial explica como obter o valor da área de texto em JavaScript.