2011-12-24 18 views
7

No puedo capturar el valor escrito por un usuario en el cuadro de texto en una variable.Valor de campo de entrada JQUERY que se almacenará en una variable

No quiero usar <form>, ¿hay alguna otra forma de hacerlo?

<html> 
    <head> 
    <style> 

    p { color:blue; margin:8px; } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
    <input type="text" id="txt_name" /> 

    <script type="text/javascript"> 
    value = $("#txt_name").val(); 
    $("#dom_element").text(value); 
    </script> 

    </body> 
    </html> 

Respuesta

11

Si desea obtener un valor que el usuario escriba, tendrá que hacerlo en respuesta a algún tipo de evento. El evento de teclado ocurre (créalo o no) cuando un usuario está escribiendo y libera una clave. Si interceptas el teclado, puedes actualizar tu variable con cada pulsación de tecla, pero también debes atrapar el "cambio" para permitir pegar y arrastrar y soltar cambios que no usan el teclado. El evento de "cambio" ocurre cuando el usuario modifica el campo y luego hace clic o pestañas fuera de él.

Además, en el momento de su variable de value es global, pero si todo lo que lo está utilizando para es fijar el valor de otro campo que no lo necesita en absoluto:

$("#txt_name").on("keyup change", function() { 
    $("#dom_element").text(this.value); 
}); 

// OR, if you need the variable for some other reason: 
$("#txt_name").on("keyup change", function() { 
    var value = this.value; // omit "var" to make it global 
    $("#dom_element").text(value); 
}); 

Tenga en cuenta que dentro de la función del controlador de eventos this será el elemento dom, por lo que puede y debe obtener su valor directamente sin jQuery.

Si está utilizando una versión anterior de jQuery, use .bind() en lugar de .on().

+0

Sé que es una vieja pregunta, pero la estaba usando (y es genial, gracias), pero me di cuenta de que solo ingresaba en el primer elemento, entonces ¿tienes alguna idea de qué puedo hacer si tengo dos o más DIV? con la identificación "#dom_element"? – euDennis

3

que te gusta esto?

Guión:

jQuery(function(){ 
    $("#txt_name").keypress(function() { 
     var value = $("#txt_name").val(); 
     $("#myDiv").text(value); 
    }); 
}); 

HTML:

<form> 
    <fieldset> 
    <input id="txt_name" type="text" value="Hello World" /> 
    </fieldset> 
</form> 
<div id="myDiv"></div> 

espero que ayude.

+1

Use el teclado en lugar de presionar la tecla. De esta forma, el último personaje aparecerá cada vez que escriba. – nick

1
<script> 
    $('#txt_name').keyup(function(){ 
     value = $("#txt_name").val(); 
     $("#dom_element").val(value); 
    }); 
</script> 

esto es de api.jquery.com:

El método .text() no se puede utilizar en entradas de formulario o secuencias de comandos. Para establecer u obtener el valor de texto de los elementos de entrada o de área de texto, use el método .val(). Para obtener el valor de un elemento de script, use el método .html().

A partir de jQuery 1.4, el método .text() devuelve el valor de los nodos de texto y CDATA, así como los nodos de elemento.

Cuestiones relacionadas