Como obter e definir o valor do texto de entrada em JavaScript

Na maioria das páginas da web, é necessário obter o valor do texto de entrada dos usuários para inserir dados corretos e garantir a segurança dos dados. Por exemplo, você precisa obter, definir ou armazenar alguns dados específicos para usá -los para processamento adicional. Nesses casos, obter e definir o valor do texto de entrada em JavaScript se torna muito útil para proteger a privacidade dos dados.

Esta redação demonstrará os métodos para obter e definir valores de texto de entrada em javascript.

Como obter e definir o valor do texto de entrada em JavaScript?

Para obter e definir o valor do texto de entrada em JavaScript, utilize:

• ““getElementById ()”Método
• ““getElementByclassName ()”Método
• ““QuerySelector ()”Método

Passar por cada um dos métodos mencionados um por um!

Método 1: Obtenha e defina o valor do texto de entrada em JavaScript usando o documento.getElementById () método

O "getElementById ()”Método acessa um elemento com o ID especificado. Este método pode ser aplicado para acessar os IDs dos campos e botões de entrada para obter e definir o valor do texto.

Sintaxe

documento.getElementById (ElementId)

Aqui, "ElementId”Refere -se ao ID especificado de um elemento.

O exemplo abaixo explica o conceito discutido.

Exemplo
Em primeiro lugar, inclua dois campos do tipo de entrada e botões separados para obter e definir os valores de texto de entrada com o “ONCLICK”Eventos que acessarão as funções especificadas:

Obter valor
Definir valor

Em seguida, obtenha o valor do campo de entrada com a ajuda do documento.getElementById () Método:

documento.getElementById ('getText').value = "entrada aqui";

Agora, declare uma função chamada “GetandSettext ()”. Aqui, busque o campo de entrada com o “getText”Id e passe o valor de entrada para o próximo campo de entrada, tendo“setText" eu ia:

function getandSettext ()
var setText = documento.getElementById ('getText').valor;
documento.getElementById ('setText').value = setText;

Da mesma forma, defina uma função chamada “getText ()”. Depois disso, obtenha o campo de entrada com “getText”Id e passe o valor específico para a caixa de alerta para obter o valor do texto de entrada:

função getText ()
var getText = documento.getElementById ('getText').valor;
alerta (getText);

Saída

Método 2: Obtenha e defina o valor de texto de entrada em JavaScript usando o documento.getElementbyclassName Método

O "getElementByclassName ()”Método acessa um elemento com a ajuda do nome da classe especificado. Este método, da mesma forma, pode ser aplicado para acessar a classe do campo de entrada e botões para inserir e definir o valor do texto.

Sintaxe

documento.getElementsbyclassName (ClassName)

Na sintaxe acima, a ““nome da classe”Representa o nome da classe dos elementos.

Exemplo
Semelhante ao exemplo anterior, primeiro acessaremos o primeiro campo de entrada com o “getText" nome da classe. Em seguida, defina uma função chamada “GetandSettext ()”E obtenha o campo de entrada especificado com base no nome da classe e defina o valor no próximo campo de entrada:

documento.getElementbyclassName ('getText').value = "entrada aqui";
function getandSettext ()

var setText = documento.getElementbyclassName ('getText').valor;
documento.getElementById ('setText').value = setText;

Da mesma forma, defina uma função chamada “getText ()”, Adicione o nome da classe do primeiro campo de entrada e passe o valor específico à caixa de alerta para exibir o valor buscado:

função getText ()
var getText = documento.getElementbyclassName ('getText').valor;
alerta (getText);

Esta implementação produzirá a seguinte saída:

Método 3: Obtenha e defina o valor do texto de entrada em JavaScript usando “documento.QuerySelector () ”Método

O "documento.QuerySelector ()”Busca o primeiro elemento que corresponde ao seletor especificado, e o método addEventListener () pode adicionar um manipulador de eventos ao elemento selecionado. Esses métodos podem ser aplicados para obter o ID do campo de entrada e botões e aplicar um manipulador de eventos a eles.

Sintaxe

documento.QuerySelector (seletores CSS)

Aqui, "Seletores CSS”Consulte um ou mais seletores de CSS.

Veja o exemplo a seguir.

Exemplo
Em primeiro lugar, inclua tipos de entrada com seus valores e botões de espaço reservado para obter e definir os valores de texto de entrada:

PEGAR

DEFINIR

Em seguida, busque os campos de entrada adicionados e botões usando o “documento.QuerySelector ()”Método:

Deixe ButtonGet = documento.QuerySelector ('#get');
Deixe Buttonset = documento.QuerySelector ('#set');
deixe getInput = documento.QuerySelector ('#input-get');
Deixe setInput = documento.QuerySelector ('#input-set');
Let Result = Documento.QuerySelector ('#resultado');

Em seguida, inclua um manipulador de eventos chamado “clique”Para ambos os botões obterem e definir os valores, respectivamente:

buttonget.addEventListener ('click', () =>
resultado.InnerText = getInput.valor;
);
botão.addEventListener ('click', () =>
getInput.valor = setInput.valor;
);

Saída

Discutimos os métodos mais simples para obter e definir o valor do texto de entrada em JavaScript.

Conclusão

Para obter e definir o valor do texto de entrada em JavaScript, utilize o “documento.getElementById ()”Método ou o

““documento.getElementByclassName ()”Método para acessar o campo de entrada especificado e botões com base em seus IDs ou nome de classe e depois definir seus valores. Além disso, o “documento.QuerySelector ()”Também pode ser utilizado para obter e definir valores de texto de entrada em JavaScript. Este blog explicou os métodos para obter e definir valores de texto de entrada em javascript.