Obtener el valor de un campo de texto con jQuery

Para obtener el valor de un campo de texto, dentro de las etiquetas Head, tenemos que añadir a nuestro documento el archivo jquery.js. Pero antes de continuar repasemos algo de información. Que es jQuery...

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Y abrir otra etiqueta Script para escribir todo los scripts.

<script type="text/jаvascript">
</script>

Dentro de las etiquetas Body, colocamos un campo de texto cualquiera y le asignamos una id; también escribiremos un div con su id para ir escribiendo el valor obtenido.

<input type="text" id="campo">
<div id="reflejar"></div>

Dentro de las etiquetas Script que acabamos de escribir, escribimos lo siguiente:

$('#campo').on('keyup', function(){
...
 });

Con esto le asignamos al objeto con la id "campo” la función .on() de jQuery, que es la que hace que se ejecute una función una vez que se activa el evento que esta entre comillas (en este caso keyup); escribíkeyup ya que, estaremos obteniendo y escribiendo el valor en el div con id "reflejar” cada vez que la tecla se levante, ya de ahi se puede escribir "click”, "dblclick”, etc.

En donde están los puntos suspensivos "…” escribimos:

una variable que contiene el valor del campo con la id "campo” (la función .val() es solo para campos de texto como: inputs y los textarea; si se quiere obtener el valor de un objeto como son los div, span, etc, es con la función .text() sin parámetros)

var valor = $('#campo').val();

y enseguida

$('#reflejar').text(valor);

al objeto con la id "reflejar” si escribimos el valor de la variable "valor”.

Aquí hay que tener cuidado, porque lo que son las funciones jQuery: .val(), .text(), .html(), si no se les escribe ningún parámetro, dentro del paréntesis, esas funciones obtienen el valor del objeto.

El código completo sería:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Incluye texto con jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/jаvascript">
$(document).ready(function (){
$('#campo').on('keyup', function(){
            var valor = $('#campo').val();
            $('#reflejar').text(valor);
            //$('#campo').val("Hola mundo");
        });
});
</script>
</head>
<body>
<input type="text" id="campo">
<div id="reflejar"></div>
</body>
</html>

Ver Resulatdo

Otro ejemplo

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<input type="text" value="Tutoriales en linea">
<p></p>
 
<script>
$( "input" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  })
  .keyup();
</script>
 
</body>
</html>

Artículos Relacionados

Comentarios