Cómo obtener y establecer el valor de texto de entrada en JavaScript

En la mayoría de las páginas web, es necesario obtener el valor de texto de entrada de los usuarios para ingresar los datos correctos y garantizar la seguridad de los datos. Por ejemplo, debe obtener, establecer o almacenar algunos datos específicos para usarlos para su posterior procesamiento. En tales casos, obtener y configurar el valor de texto de entrada en JavaScript se vuelve muy útil para proteger la privacidad de los datos.

Esta redacción demostrará los métodos para obtener y establecer valores de texto de entrada en JavaScript.

Cómo obtener y establecer el valor de texto de entrada en JavaScript?

Para obtener y establecer el valor de texto de entrada en JavaScript, utilice:

• "getElementById ()" método
• "getElementByClassName ()" método
• "QuerySelector ()" método

Pasar por cada uno de los métodos mencionados uno por uno!

Método 1: Obtener y establecer el valor de texto de entrada en JavaScript usando el documento.método getElementById ()

El "getElementById ()El método "accede a un elemento con la ID especificada. Este método se puede aplicar para acceder a los ID de los campos de entrada y los botones para obtener y configurar el valor de texto.

Sintaxis

documento.getElementById (ElementId)

Aquí, "elemento"Se refiere a la identificación especificada de un elemento.

El siguiente ejemplo explica el concepto discutido.

Ejemplo
En primer lugar, incluya dos campos de tipo de entrada y botones separados para obtener y configurar los valores de texto de entrada con el "al hacer clic"Eventos que accederán a las funciones especificadas:

Obtener valor
Valor ajustado

Luego, obtenga el valor del campo de entrada con la ayuda del documento.Método GetElementById ():

documento.getElementById ('getText').valor = "entrada aquí";

Ahora, declare una función llamada "getAndsetText ()". Aquí, obtenga el campo de entrada con el "getText"ID y pasar el valor de entrada al siguiente campo de entrada que tiene"settext" identificación:

función getAndSetText ()
var setText = documento.getElementById ('getText').valor;
documento.getElementById ('setText').valor = settext;

Del mismo modo, defina una función llamada "getText ()". Después de eso, obtenga el campo de entrada con "getTextID y pasar el valor particular al cuadro de alerta para obtener el valor de texto de entrada:

función getText ()
var getText = documento.getElementById ('getText').valor;
alerta (getText);

Producción

Método 2: Obtener y establecer el valor de texto de entrada en JavaScript usando el documento.método getElementByClassName ()

El "getElementByClassName ()"El método accede a un elemento con la ayuda del nombre de clase especificado. Este método, de manera similar, se puede aplicar para acceder a la clase del campo de entrada y los botones para ingresar y configurar el valor de texto.

Sintaxis

documento.GetElementsByClassName (ClassName)

En la sintaxis anterior, la "nombre de la clase"Representa el nombre de clase de los elementos.

Ejemplo
Similar al ejemplo anterior, primero accederemos al primer campo de entrada con el "getText" nombre de la clase. Luego, defina una función llamada "getAndsetText ()"Y obtenga el campo de entrada especificado en función del nombre de su clase y establezca el valor en el siguiente campo de entrada:

documento.getElementByClassName ('getText').valor = "entrada aquí";
función getAndSetText ()

var setText = documento.getElementByClassName ('getText').valor;
documento.getElementById ('setText').valor = settext;

Del mismo modo, defina una función llamada "getText ()", Agregue el nombre de clase del primer campo de entrada y pase el valor particular al cuadro de alerta para mostrar el valor recuperado:

función getText ()
var getText = documento.getElementByClassName ('getText').valor;
alerta (getText);

Esta implementación producirá la siguiente salida:

Método 3: Obtener y establecer el valor de texto de entrada en JavaScript usando "Documento.método QuerySelector () "

El "documento.QuerySelector ()"Observa el primer elemento que coincide con el selector especificado, y el método AddEventListener () puede agregar un controlador de eventos al elemento seleccionado. Estos métodos se pueden aplicar para obtener la ID del campo de entrada y los botones y aplicarles un controlador de eventos.

Sintaxis

documento.QuerySelector (selectores CSS)

Aquí, "Selectores CSS"Consulte uno o más selectores CSS.

Mira el siguiente ejemplo.

Ejemplo
En primer lugar, incluya tipos de entrada con los valores y botones de su marcador de posición para obtener y configurar los valores de texto de entrada:

CONSEGUIR

COLOCAR

A continuación, obtenga los campos de entrada y los botones agregados utilizando el "documento.QuerySelector ()" método:

Let Buttonget = documento.QuerySelector ('#get');
Dejar buttonset = documento.QuerySelector ('#set');
Dejar getInput = documento.QuerySelector ('#input-get');
Dejar setInput = documento.QuerySelector ('##input-set');
Sea resultado = documento.QuerySelector ('#resultado');

Luego, incluya un controlador de eventos llamado "hacer clic"Para ambos botones obtenga y establece los valores, respectivamente:

butalget.addEventListener ('click', () =>
resultado.inteText = getInput.valor;
);
bulto.addEventListener ('click', () =>
GetInput.valor = setInput.valor;
);

Producción

Hemos discutido los métodos más simples para obtener y establecer el valor de texto de entrada en JavaScript.

Conclusión

Para obtener y establecer el valor de texto de entrada en JavaScript, utilice el "documento.getElementById ()Método "o el

"documento.getElementByClassName ()Método para acceder al campo de entrada y los botones especificados en función de sus ID o nombre de clase y luego establecer sus valores. Además, el "documento.QuerySelector ()"También se puede utilizar para obtener y establecer valores de texto de entrada en JavaScript. Este blog explicó los métodos para obtener y establecer valores de texto de entrada en JavaScript.