2011-12-24 12 views
7

Non riesco a catturare il valore digitato da un utente nella casella di testo in una variabile.JQUERY valore del campo di input da memorizzare in una variabile

Non voglio usare <form>, c'è un altro modo per farlo?

<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> 

risposta

11

Se si desidera ottenere un valore che l'utente digita, è necessario farlo in risposta a qualche tipo di evento. L'evento keyup si verifica (che ci crediate o meno) quando un utente digita e rilascia una chiave. Se si intercetta la chiave, è possibile aggiornare la variabile con ogni sequenza di tasti, ma si consiglia di intercettare anche "modifica" per consentire le modifiche di incolla e di drag'n'drop che non utilizzano la tastiera. L'evento "change" si verifica quando l'utente modifica il campo e quindi fa clic su o su schede da esso.

Inoltre, al momento la variabile value è globale, ma se tutto quello che si utilizza per è per impostare il valore di un altro campo non è necessario affatto:

$("#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); 
}); 

Nota che entro la funzione di gestore eventi this sarà l'elemento dom in modo che tu possa e debba ottenere il suo valore direttamente senza jQuery.

Se si sta utilizzando una versione precedente di jQuery, utilizzare .bind() anziché .on().

+0

Conosco una vecchia domanda, ma la stavo usando (ed è grandiosa, grazie), ma ho notato che è solo input sul primo elemento, quindi hai qualche ideia cosa posso fare se ho due o più DIV con l'ID "#dom_element"? – euDennis

3

intendi questo?

Script:

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> 

Spero che ti aiuti.

+1

Utilizzare keyup anziché keypress. in questo modo l'ultimo carattere apparirà ogni volta che digitano. – nick

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

questo è da api.jquery.com:

Il metodo .text() non può essere utilizzato su ingressi modulo o script. Per impostare o ottenere il valore di testo degli elementi input o textarea, utilizzare il metodo .val(). Per ottenere il valore di un elemento di script, utilizzare il metodo .html().

A partire da jQuery 1.4, il metodo .text() restituisce il valore del testo, dei nodi CDATA e dei nodi elemento.