2011-12-24 18 views
7

Nie mogę przechwycić wartości wpisanej przez użytkownika w polu tekstowym do zmiennej.Wartość pola wejściowego JQUERY do zapisania w zmiennej

Nie chcę używać <form>, czy jest jakiś inny sposób na zrobienie tego?

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

Odpowiedz

11

Jeśli chcesz uzyskać wartość, którą użytkownik wpisze, musisz to zrobić w odpowiedzi na jakieś wydarzenie. Zdarzenie keyup występuje (wierzcie lub nie), gdy użytkownik wpisuje i zwalnia klucz. Jeśli pułapkę można zablokować, można zaktualizować zmienną za każdym naciśnięciem klawisza, ale należy również "zmienić" pułapkę, aby umożliwić wklejenie i przeciąganie zmian, które nie używają klawiatury. Zdarzenie "zmiana" ma miejsce, gdy użytkownik modyfikuje pole, a następnie kliknie lub zniknie z niego.

Ponadto, w tej chwili zmienna value ma charakter globalny, ale jeśli wszystkie używasz go na to, aby ustawić wartość innego pola nie trzeba go wcale:

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

Należy zauważyć, że w ciągu funkcja obsługi zdarzenia this będzie elementem dom, dzięki czemu można i należy uzyskać jego wartość bezpośrednio bez jQuery.

Jeśli używasz starej wersji jQuery, użyj .bind() zamiast .on().

+0

Wiem, że stare pytanie, ale go używałem (i to świetnie, dziękuję), ale zauważyłem, że to tylko wkład w pierwszy element, więc czy masz jakąś ideę, co mogę zrobić, jeśli mam dwa lub więcej DIV z identyfikatorem "#dom_element"? – euDennis

3

masz na myśli?

Scenariusz:

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> 

Mam nadzieję, że pomoże.

+1

Użyj klawiszy zamiast klawisza. w ten sposób ostatnia postać pojawi się za każdym razem, gdy wpisze. – nick

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

jest z api.jquery.com:

Sposób .text() nie mogą być stosowane w formie wejść lub scenariuszy. Aby ustawić lub uzyskać wartość tekstową elementów wejściowych lub tekstowych, należy użyć metody .val(). Aby uzyskać wartość elementu skryptu, użyj metody .html().

Od wersji jQuery 1.4 metoda .text() zwraca wartość węzłów tekstowych i CDATA, a także węzłów elementów.

Powiązane problemy