Nhận giá trị trong một hộp văn bản đầu vào


1004

Các cách để nhận và kết xuất giá trị đầu vào bằng jQuery là gì?

Đây là một:

$(document).ready(function() {
  $("#txt_name").keyup(function() {
    alert($(this).val());
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />


1
sử dụng mã này: var value = $ ('# txt_Name'). val (); Bạn cũng có thể đặt giá trị bằng cách sử dụng jquery. hãy nhìn vào bài viết này tại địa chỉ: coding-issues.blogspot.in/2013/10/...
Ranadheer Reddy

Câu trả lời:


1654
//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);

35
@Prabs, câu hỏi là: "Cách nhận và hiển thị giá trị đầu vào bằng jQuery là gì?", Nhãn không phải là đầu vào.
Barry Michael Doyle

3
xóa các trích dẫn từ 'bla'. Nó phải là $ ('# txt_name'). Val (bla);
Charles Xavier

9
@ParbhuBissessar Không nhất thiết. Nếu anh ta muốn văn bản theo nghĩa đen 'bla', anh ta đã hiểu đúng. Nếu ông muốn valcủa var blasau đó anh ta cần phải loại bỏ các dấu ngoặc kép.
double_j

chú ý các get: "val ()" thay vì "val" bạn có thể xem hồ sơ của tôi
TheRedstoneTaco

tôi đã làm điều này nhưng có vấn đề.
Wasey Raza

591

Bạn chỉ có thể chọn một giá trị theo hai cách sau:

// First way to get a value
value = $("#txt_name").val(); 

// Second way to get a value
value = $("#txt_name").attr('value');

Nếu bạn muốn sử dụng JavaScript thẳng để nhận giá trị, đây là cách:

document.getElementById('txt_name').value 

6
Tôi biết đây là một câu hỏi cũ hơn, nhưng đừng quên rằng attrcũng có thể được thay thế bằng prop. Điều này là tốt hơn về mặt ngữ nghĩa.
Sablefoste

Chỉ $("#txt_name").val(str);làm việc với tôi trong Chrome để đặt giá trị. Hãy thử bài này .
gkiko

Hàm nối thêm jQuery dường như không có vấn đề gì khi thêm vào HTML trong khi vẫn giữ các giá trị biểu mẫu.
Adam F

1
$ ("# txt_name"). attr ('giá trị'); trả về giá trị mặc định / câu trả lời là không chính xác!
zloctb

1
Hãy nhớ rằng $("#txt_name").attr('value')sẽ luôn trả về nội dung của "giá trị" thuộc tính, vì vậy nếu bạn thay đổi trường đầu vào, giá trị sẽ không thay đổi. .val()sẽ luôn trả lại nội dung của lĩnh vực này ..
honk31

84

Có một điều quan trọng cần đề cập:

$("#txt_name").val();

sẽ trả về giá trị thực hiện tại của trường văn bản, ví dụ nếu người dùng nhập nội dung nào đó sau khi tải trang.

Nhưng:

$("#txt_name").attr('value')

sẽ trả về giá trị từ DOM / HTML.


40

Bạn có thể lấy valuethuộc tính trực tiếp vì bạn biết đó là một <input>yếu tố, nhưng cách sử dụng hiện tại của bạn .val()đã là thuộc tính hiện tại.

Đối với ở trên, chỉ cần sử dụng .valuetrực tiếp trên phần tử DOM, như thế này :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});

@Bharan Tại sao bạn cần một giải pháp thay thế?
Doug Molineux

3
ở một nơi nào đó, tôi muốn sử dụng thay thế,
Bharanikumar

16

Bạn phải sử dụng nhiều cách khác nhau để có được giá trị hiện tại của một yếu tố đầu vào.

PHƯƠNG PHÁP - 1

Nếu bạn muốn sử dụng đơn giản .val(), hãy thử điều này:

<input type="text" id="txt_name" />

Nhận giá trị từ đầu vào

// use to select with DOM element.
$("input").val();

// use the id to select the element.
$("#txt_name").val();

// use type="text" with input to select the element
$("input:text").val();

Đặt giá trị thành Đầu vào

// use to add "text content" to the DOM element.
$("input").val("text content");

// use the id to add "text content" to the element.
$("#txt_name").val("text content");

// use type="text" with input to add "text content" to the element
$("input:text").val("text content");

PHƯƠNG PHÁP - 2

Sử dụng .attr()để có được nội dung.

<input type="text" id="txt_name" value="" />

Tôi chỉ cần thêm một thuộc tính cho trường đầu vào. value=""thuộc tính là người mang nội dung văn bản mà chúng ta đã nhập trong trường nhập.

$("input").attr("value");

PHƯƠNG PHÁP - 3

bạn có thể sử dụng cái này trực tiếp trên inputphần tử của bạn .

$("input").keyup(function(){
    alert(this.value);
});

15

Bạn có thể nhận được giá trị như thế này:

this['inputname'].value

Trong đó thisđề cập đến các hình thức có chứa đầu vào.


8
Câu trả lời này giả định rằng thisđang đề cập đến hình thức có chứa đầu vào.
Nandan

15

Tôi nghĩ rằng chức năng này bị bỏ lỡ ở đây trong các câu trả lời trước:

.val( function(index, value) ) 

6

Để có được giá trị hộp văn bản, bạn có thể sử dụng val()hàm jQuery .

Ví dụ,

$('input:textbox').val() - Nhận giá trị hộp văn bản.

$('input:textbox').val("new text message") - Đặt giá trị hộp văn bản.


3

Đối với những người giống như tôi là người mới trong JS và nhận được undefinedthay vì giá trị văn bản, hãy đảm bảo rằng bạn idkhông chứa các ký tự không hợp lệ .


3

Bạn chỉ có thể đặt giá trị trong hộp văn bản.

Đầu tiên, bạn nhận được giá trị như

var getValue = $('#txt_name').val();

Sau khi nhận được một giá trị được đặt trong đầu vào như

$('#txt_name').val(getValue);

1

Thử cái này. Nó sẽ làm việc chắc chắn.

var userInput = $('#txt_name').attr('value')

Không, nó sẽ không !! (1) Nếu không có thuộc tính "value" ( <input type="text" />), nó sẽ trả về không xác định. (2) Nếu bạn làm như thế này <input type="text" value="test" />và người dùng gõ foo vào trường đầu vào, $('#txt_name').attr('value')thử nghiệm vẫn trả về "
ndsvw

Câu trả lời này không đúng nhưng đây là API tôi đang tìm kiếm.
Anthony
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.