Inicia sesión


Obtener el valor de un campo de texto con jQuery

Obtener el valor de un campo de texto con jQueryPara 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-1.10.1.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-1.10.1.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


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-22
  • Categorias: Diseño Web jQuery WebSite webmasters Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial