Obtener el valor del área de texto en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Obtener el valor del área de texto en …
Muhammad Muzammil Hussain 12 octubre 2023
JavaScript JavaScript Text
  1. Obtener el valor del área de texto en JavaScript
  2. Obtener el valor del área de texto en jQuery
Obtener el valor del área de texto en JavaScript

En el desarrollo web, la mayoría de las veces, necesitamos leer y obtener el valor del área de texto usando documentos HTML DOM y otras bibliotecas. Podemos manejarlo usando las funciones predeterminadas de JavaScript y jQuery.

En este artículo, aprenderemos a obtener el valor del área de texto de una página web usando JavaScript y jQuery y almacenarlo en una variable.

Obtener el valor del área de texto en JavaScript

En JavaScript, podemos leer el valor del texto utilizando el método de documento HTML DOM getElementById("elementId").value. El método getElementById() devuelve un elemento con valor definido; si el elemento no existe devuelve null.

La propiedad .value coloca y devuelve el valor del atributo value de un área de texto. Esa propiedad lleva el valor predeterminado o el valor que da un usuario.

Sintaxis básica:

Aquí, obtenemos el valor de un elemento específico usando el ID y almacenándolo en la variable textValue.

let textValue = document.getElementById('myText').value

Código de ejemplo:

<!DOCTYPE html>
<html>
<body>

<h1>
Get text area value in JavaScript
</h1>

Enter any value: <input type="text" id="myElement" value="Default">

<p>Click the button to read the value.</p>

<button onclick="myFunction()">Read Value</button>

<script>
function myFunction() {
 let result = document.getElementById("myElement").value //getting value, storing in variable
  alert(result) // displaying in alert
}
</script>

</body>
</html>

Explicación del código de ejemplo:

  1. En la fuente HTML anterior, hemos creado un campo de entrada para obtener el valor del usuario.
  2. Luego, creamos un evento de botón onclick de ese botón llamado myFunction().
  3. En el cuerpo de myFunction(), hemos declarado la variable resultado y le hemos asignado a esa variable un valor de elemento usando document.getElementById("myElement").value .
  4. Finalmente, mostramos el valor de la variable resultado al usuario en una alerta.
  5. Puede guardar la fuente anterior con la extensión .html y abrirla en cualquier navegador para ver el resultado.

Obtener el valor del área de texto en jQuery

En jQuery podemos leer el valor del texto usando el método jQuery $("#elementID").val(). Primero, debemos agregar jQuery CDN (red de entrega de contenido) en las etiquetas de script del encabezado.

Código de ejemplo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    alert( $("input:text").val()); //read value from input and display in alert
    });
});
</script>
</head>
<body>

Enter any value: <input type="text" id="myElement" value="Default"> //getting value from user

<button >Read Value using jQuery</button>

</body>
</html>

Explicación del código de ejemplo:

  1. En el código HTML anterior, hemos creado un campo de entrada para obtener el valor del usuario.
  2. Hemos creado un botón para llamar a la función jQuery.
  3. En las etiquetas <script>, hemos llamado un evento de clic en el botón.
  4. Dentro de ese evento de clic, hemos leído el valor del área de texto proporcionado por el usuario y lo mostramos en una alerta.
  5. Puede guardar la fuente anterior con la extensión .html y abrirla en cualquier navegador para ver el resultado.

Artículo relacionado - JavaScript Text