2011-12-24 28 views
7

Tôi không thể nắm bắt giá trị được nhập bởi người dùng trong hộp văn bản vào một biến.Giá trị trường đầu vào JQUERY được lưu trữ trong một biến

Tôi không muốn sử dụng <form>, có cách nào khác để thực hiện việc này không?

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

Trả lời

11

Nếu bạn muốn nhận được giá trị mà người dùng nhập thì bạn cần phải làm như vậy để phản hồi một số loại sự kiện. Sự kiện keyup xảy ra (tin hay không) khi người dùng nhập và phát hành một khóa. Nếu bạn bẫy keyup bạn có thể cập nhật biến của bạn với mỗi phím tắt nhưng bạn nên bẫy "thay đổi" cũng như cho phép dán và drag'n'drop thay đổi mà không sử dụng bàn phím. Sự kiện "thay đổi" xảy ra khi người dùng sửa đổi trường và sau đó nhấp hoặc tab ra khỏi trường.

Ngoài ra, vào lúc này biến value của bạn là toàn cầu, nhưng nếu tất cả các bạn đang sử dụng nó cho là để thiết lập giá trị của trường khác, bạn không cần nó ở tất cả:

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

Lưu ý rằng trong vòng chức năng xử lý sự kiện this sẽ là phần tử dom để bạn có thể và sẽ nhận được giá trị của nó trực tiếp mà không cần jQuery.

Nếu bạn đang sử dụng phiên bản cũ của jQuery, hãy sử dụng .bind() thay vì .on().

+0

Tôi biết rằng một câu hỏi cũ, nhưng tôi đã sử dụng nó (và nó rất tuyệt, cảm ơn), nhưng tôi nhận thấy rằng nó chỉ nhập vào phần tử đầu tiên, vì vậy bạn có bất kỳ ý thức nào tôi có thể làm gì nếu tôi có từ hai DIV trở lên với ID "#dom_element"? – euDennis

3

ý bạn là như thế này?

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> 

Tôi hy vọng rằng sự giúp đỡ bạn.

+1

Sử dụng khóa bàn phím thay vì nhấn phím. theo cách đó, nhân vật cuối cùng sẽ xuất hiện mỗi khi họ nhập. – nick

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

này là từ api.jquery.com:

Phương pháp .text() không thể được sử dụng trên đầu vào hình thức hoặc các kịch bản. Để đặt hoặc nhận giá trị văn bản của các phần tử đầu vào hoặc văn bản, hãy sử dụng phương thức .val(). Để lấy giá trị của một phần tử script, sử dụng phương thức .html().

Kể từ jQuery 1.4, phương thức .text() trả về giá trị của các nút văn bản và CDATA cũng như các nút phần tử.

Các vấn đề liên quan