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

Te sugiero seguir leyendo...


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

Obtener el valor de un campo de texto con jQuery
Obtener el valor de un campo de texto con jQuery Obtener el valor de un campo de texto con jQuery...
Tutoriales en linea




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






Herramienta para hackear a Facebook

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-09
  • Categorias: Facebook keylogger malware hacker Noticias Tutorial

Cómo espiar Facebook y obtener la cuenta de alguien

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-23
  • Categorias: Android Redes Sociales Facebook Noticias Tutorial

Saber si te han hackeado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-16
  • Categorias: Redes Sociales hacker Noticias Tutorial

Access desde cero

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-14
  • Categorias: Herramientas Ofimaticas Microsoft Cursos Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial