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

Cuando se trabaja con formularios en una pagina web, a menudo necesitamos acceder al valor de un campo de entrada de texto y establecer su valor programáticamente. JavaScript nos proporciona varias formas de acceder y establecer el valor de una entrada de texto. En este artículo, discutiremos estas formas con ejemplos detallados.

Obteniendo el valor de una entrada de texto

Para obtener el valor de una entrada de texto, podemos utilizar la propiedad `value` del objeto de entrada. El siguiente código muestra cómo hacerlo:


const input = document.getElementById('titulo');
const valor = input.value;
console.log(valor);


En el código anterior, creamos una referencia al elemento de entrada de texto con el id "titulo" y luego accedimos a su valor utilizando la propiedad `value`. Finalmente, imprimimos el valor en la consola.

También podemos obtener el valor de una entrada de texto utilizando la función `querySelector` en lugar de `getElementById`. El siguiente código muestra cómo hacerlo:


const input = document.querySelector('input[type="text"]');
const valor = input.value;
console.log(valor);


En el código anterior, usamos `querySelector` para seleccionar el primer elemento de entrada de texto en la página y luego accedimos a su valor utilizando la propiedad `value`.

Estableciendo el valor de una entrada de texto

Para establecer el valor de una entrada de texto, podemos utilizar la propiedad `value` del objeto de entrada y establecer su valor como una cadena. El siguiente código muestra cómo hacerlo:


const input = document.getElementById('titulo');
input.value = 'Nuevo valor';


En el código anterior, creamos una referencia al elemento de entrada de texto con el id "titulo" y luego establecimos su valor como "Nuevo valor" utilizando la propiedad `value`.

También podemos establecer el valor de una entrada de texto utilizando la función `setAttribute`. El siguiente código muestra cómo hacerlo:


const input = document.querySelector('input[type="text"]');
input.setAttribute('value', 'Nuevo valor');


En el código anterior, usamos `querySelector` para seleccionar el primer elemento de entrada de texto en la página y luego establecimos su valor utilizando la función `setAttribute`.

Ejemplos de código

A continuación se muestran algunos ejemplos de código que demuestran cómo obtener y establecer el valor de una entrada de texto en diferentes situaciones.

Ejemplo 1: Obtener y establecer el valor de una entrada de texto en una página web simple

Supongamos que tenemos una página web simple con un formulario que contiene un campo de entrada de texto con el id "nombre". El siguiente código muestra cómo obtener el valor de este campo cuando se envía el formulario:


const formulario = document.querySelector('form');
formulario.addEventListener('submit', (event) => {
event.preventDefault();
const input = document.getElementById('nombre');
const valor = input.value;
console.log(valor);
});


En el código anterior, creamos una referencia al formulario y agregamos un escucha de eventos para el evento "submit". Dentro del controlador de eventos, prevenimos el comportamiento predeterminado del formulario utilizando `preventDefault` y luego obtenemos el valor del campo de entrada de texto con el id "nombre" utilizando la propiedad `value`. Finalmente, imprimimos el valor en la consola.

También podemos establecer el valor de este campo de entrada de texto programáticamente. El siguiente código muestra cómo hacerlo:


const input = document.getElementById('nombre');
input.value = 'Elena';


En el código anterior, creamos una referencia al campo de entrada de texto con el id "nombre" y establecemos su valor como "Elena" utilizando la propiedad `value`.

Ejemplo 2: Obtener y establecer el valor de una entrada de texto en un formulario dinámico

Supongamos que tenemos un formulario dinámico que se crea y agrega a la página web utilizando JavaScript. El siguiente código muestra cómo obtener y establecer el valor de un campo de entrada de texto en este formulario:


const formulario = document.createElement('form');
const input = document.createElement('input');
input.type = 'text';
input.id = 'mensaje';
formulario.appendChild(input);
document.body.appendChild(formulario);

// Establecer el valor del campo de entrada de texto
input.value = 'Hola mundo!';


En el código anterior, creamos un formulario dinámico con un campo de entrada de texto utilizando JavaScript y lo agregamos a la página web. Luego, obtenemos el valor del campo de entrada de texto con el id "mensaje" utilizando la propiedad `value` y lo imprimimos en la consola. Finalmente, establecemos el valor del campo de entrada de texto como "Hola mundo!" utilizando la propiedad `value`.

Conclusión

En este artículo, hemos discutido cómo obtener y establecer el valor de una entrada de texto en JavaScript. Hemos visto que podemos utilizar la propiedad `value` del objeto de entrada o la función `setAttribute` para establecer el valor programáticamente. También hemos visto algunos ejemplos de código que demuestran cómo hacerlo en diferentes situaciones. Ahora estás listo para trabajar con formularios y campos de entrada de texto en tus proyectos de JavaScript.

Preguntas frecuentes

¿Se puede obtener el valor de una entrada de texto utilizando jQuery?

Sí, podemos obtener el valor de una entrada de texto utilizando `val()` en jQuery. El siguiente código muestra cómo hacerlo:


const valor = $('#titulo').val();
console.log(valor);


¿Cómo se puede establecer el valor de una entrada de texto en un formulario de relleno automático?

En un formulario de relleno automático, podemos establecer el valor de una entrada de texto utilizando JavaScript y la propiedad `value`. Sin embargo, debemos hacerlo después de que el formulario se haya rellenado automáticamente. El siguiente código muestra cómo hacerlo:


setTimeout(() => {
const input = document.getElementById('titulo');
input.value = 'Nuevo valor';
}, 1000);


En el código anterior, usamos `setTimeout` para esperar un segundo después de que el formulario se haya rellenado automáticamente y luego establecemos el valor del campo de entrada de texto con el id "titulo" como "Nuevo valor" utilizando la propiedad `value`.

Array.size() vs Array.length – JavaScript

Parsear una cadena de HTML con JS - JavaScript

Cómo imprimir en la Consola en JavaScript

Cómo establecer el evento onClick con JavaScript

Cómo leer un archivo línea por línea en JavaScript

Cómo agregar comas a los números en JavaScript

Cómo eliminar caracteres de cadenas de texto en JavaScript

¿Qué es 'export default' en JavaScript?

Inserción de variables en Strings con JavaScript