Đặt giá trị của trường đầu vào


Câu trả lời:


818

Đây là một cách để làm điều đó:

document.getElementById("mytext").value = "My value";

6
Tôi sẽ, có cách nào để tạo ra NULL vale nếu người dùng nhấp vào trường không?
SebastianOpperman

4
Có, chỉ định một trình xử lý sự kiện cho trường đầu vào xóa sạch giá trị onclick. Ví dụ: elem.onclick = clearField (); // sẽ trỏ đến một hàm xóa trường bằng cách đặt giá trị thành không có gì, tương tự như câu trả lời ở trên.
James

1
Đối với tôi nó không hoạt động. ở trên sẽ tạo ra thuộc tính giá trị?
Dchris

2
Điều này dường như không hoạt động nếu bạn đang cố gắng thay đổi giá trị cho chính thẻ đầu vào. Để làm rõ, nếu tôi có một nút nên thay đổi giá trị của nó khi nhấp vào, tôi dường như không thể thay đổi nó, cũng không phải bởi "this.parentNode.getEuityByTagName ('input'). Style.display = 'none '; " cũng không bằng cách sử dụng this.style.display = 'none'; Ngoài ra, tôi thậm chí đã thử sử dụng ".style = display: none; ';" không thành công ...
MahNas92

7
Câu trả lời này và các câu trả lời khác cho câu hỏi trên dường như bỏ qua rằng giá trị mặc định sẽ được thay đổi. Sử dụng .value = ...không chỉ thay đổi giá trị hiện tại. Đặt lại biểu mẫu ( <input type="reset" />ví dụ) sẽ thay đổi giá trị trở lại giá trị ban đầu. Ngược lại, setAttribute("value", ...)hoạt động đúng trong Firefox và Chrome. Giá trị mặc định được thay đổi nhưng giá trị thực tế chỉ được thay đổi nếu người dùng chưa sửa đổi nó. Tuy nhiên, setAttributekhông được khuyến khích vì khả năng tương thích trình duyệt. Có khả năng nào khác không?
JojOatXGME

55

nếu biểu mẫu của bạn chứa trường nhập liệu như

<input type='text' id='id1' />

sau đó bạn có thể viết mã bằng javascript như được đưa ra dưới đây để đặt giá trị của nó là

document.getElementById('id1').value='text to be displayed' ; 

52

Tôi sử dụng chức năng 'setAttribution':

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>

18
valuenên được truy cập trực tiếp bằng cách sử dụng ký hiệu dấu chấm: developer.mozilla.org/en-US/docs/Web/API/Euity.setAttribution bạn chỉ sử dụng set / getAttribution để xử lý giá trị ban đầu. Sau khi DOM được tải, .valuebiểu thị giá trị làm việc thực tế của phần tử.
Chris Baker

4
@ChrisBaker Tôi sẽ +1000 câu trả lời này nếu có thể. Tôi có một ứng dụng bên thứ 3 quét các trường đầu vào để tự động hóa ứng dụng (trang của tôi hiển thị trong phần nhúng tức là Control). Đây là một kịch bản duy nhất trong đó các trường đầu vào được sử dụng bởi ứng dụng của khách hàng. Các trường đầu vào không được đặt lại ngay sau khi gửi lại bằng .value trong chức năng sẵn sàng tài liệu của tôi. Khi tôi có một postback async sau đó, người dùng sẽ bắt đầu, nó sẽ sử dụng lại các giá trị đầu vào này để tự động hóa thứ gì đó mà họ đã nhấp vào trước đó và tôi cần trang để "quên chúng". Đây là nước sốt ma thuật tôi cần. Cảm ơn Pepe và Chris!
MikeTeeVee

3
Tôi đang sử dụng Yii 2.0 và đặt trực tiếp .value = '' sẽ không chạy xác thực mẫu đúng cách trên trường. Sử dụng setAttribution ('value', '...') được xử lý đúng cách. cảm ơn!
ekscrypto

Tôi có một vấn đề kỳ lạ mà giải quyết với setAttribute. Vấn đề của tôi là thay đổi giá trị của một đầu vào thông qua một lệnh gọi hàm, thay đổi các đầu vào thay đổi cuối cùng.
SAMPro

Tôi có thể đặt giá trị thành đầu vào phương thức bật lên (văn bản) chỉ bằng cách sử dụng câu trả lời này. .value không làm việc cho tôi. Cảm ơn bạn
Ula

19

Hãy thử những điều này.

document.getElementById("current").value = 12

// or

var current = document.getElementById("current");
current.value = 12

2
Không bao giờ đặt giá trị phi văn bản cho các trường như vậy. Nếu bạn đọc lại, bạn sẽ đọc chuỗi (!) Trong một số trình duyệt)
socketcharge

18

Câu trả lời rất đơn giản

// Your HTML text field

<input type="text" name="name" id="txt">

//Your javascript

<script type="text/javascript"> 
document.getElementById("txt").value = "My default value";
</script>

Hoặc nếu bạn muốn tránh JavaScript hoàn toàn: Bạn có thể xác định nó chỉ bằng cách sử dụng HTML

<input type="text" name="name" id="txt" value="My default value">

6
Thật ngạc nhiên khi chỉ có một người ở đây đề nghị sử dụng valuethuộc tính ...
Algy Taylor

@AlgyTaylor đánh giá cao nỗ lực của bạn và cảm ơn bạn vì nhận xét tuyệt vời của bạn
Người viết mã php

15

Nếu bạn đang sử dụng nhiều hình thức, bạn có thể sử dụng:

<form name='myForm'>
    <input type='text' name='name' value=''>
</form>

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>

3
Lý do tôi thích câu trả lời này là vì bạn sử dụng thuộc tính "name" của biểu mẫu thay vì ID phần tử DOM, tại sao lại thêm trường ID vào mỗi đầu vào của biểu mẫu khi bạn không cần?
run rẩy

@tremor hoàn toàn đồng ý và đây là câu trả lời đầu tiên tôi tìm thấy bằng cách sử dụng "tên" chứ không phải "id".

8

Câu trả lời đơn giản không có trong Javascript, cách đơn giản nhất để có được giữ chỗ là thông qua thuộc tính giữ chỗ

<input type="text" name="text_box_1" placeholder="My Default Value" />

1
Vấn đề với điều này là nó hoàn toàn không hoạt động với Internet Explorer. Nếu bạn biết bạn sẽ không có máy khách IE, thì có, đây là câu trả lời tốt nhất.
Sifu

2
@Sifu Đây có lẽ là thực sự là một điều tốt để làm ngay cả khi bạn làm biết bạn có khách hàng IE (có thể thêm vào một giải pháp JavaScript) vì nó sẽ cũng tái thiết lập giá trị khi lĩnh vực này là trống.
ahruss

1
@Sifu khi IE không hỗ trợ thuộc tính giữ chỗ, hãy sử dụng IE và truy cập www.1c3br3ak3r-multidia.ca và xem thanh tìm kiếm, nó sử dụng thuộc tính giữ chỗ
RWolfe

1
@Jdoonan cách đây không lâu thực sự - caniuse.com/#feat=input-placeholder giữ chỗ được hỗ trợ trong IE10 trở lên
danwellman

6

Thật đơn giản; Một ví dụ là:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>

4
document.getElementById("fieldId").value = "Value";

hoặc là

document.forms['formId']['fieldId'].value = "Value";

hoặc là

document.getElementById("fieldId").setAttribute('value','Value');

3
setAttribution ('value', 'Value'); không đặt giá trị hiển thị trong hộp văn bản cho tôi trên Chrome.
Curtis

1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


<script>
var form_value = document.getElementById("inputid").value;
</script>    

Bạn cũng có thể thay đổi giá trị mặc định thành giá trị mới

<script>
document.getElementById("inputid").value = 4000;     
</script>

1

Phần này bạn sử dụng trong html

<input id="latitude" type="text" name="latitude"></p>

Đây là javaScript:

<script>
document.getElementById("latitude").value=25;
</script>

0

Bạn cũng có thể thử:

document.getElementById('theID').value = 'new value';

3
Đặt giá trị mới không đặt giá trị mặc định. Do đó, điều này không giải quyết được vấn đề. Bạn nên nói rằng như bình luận của bài viết một khi bạn đã có đủ danh tiếng.
Daniel Cheung
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.