Tetapkan nilai bidang input


Jawaban:


818

Ini adalah salah satu cara melakukannya:

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

6
Saya akan, apakah ada cara untuk membuat VULL NULL jika pengguna mengklik di lapangan?
SebastianOpperman

4
Ya, tetapkan event handler ke bidang input yang menghapus nilai onclick. Contoh: elem.onclick = clearField (); // itu akan menunjuk ke fungsi yang menghapus bidang dengan menetapkan nilai ke tidak ada, mirip dengan jawaban di atas.
James

1
bagi saya itu tidak berhasil. akankah hal di atas membuat atribut nilai?
Dchris

2
Ini tampaknya tidak berfungsi jika Anda mencoba mengubah nilai untuk tag input itu sendiri. Untuk memperjelas, jika saya memiliki tombol yang harus mengubah nilainya ketika diklik, sepertinya saya tidak dapat mengubahnya, juga dengan "this.parentNode.getElementByTagName ('input'). Style.display = 'tidak ada '; " atau dengan menggunakan this.style.display = 'tidak ada'; Juga, saya bahkan mencoba menggunakan ".style = display: none; ';" tanpa keberhasilan ...
MahNas92

7
Ini dan jawaban lain untuk pertanyaan di atas tampaknya mengabaikan bahwa nilai default harus diubah. Penggunaan .value = ...memang mengubah nilai saat ini saja. Menyetel ulang formulir (dengan <input type="reset" />misalnya) akan mengubah nilai kembali ke yang asli. Sebaliknya, setAttribute("value", ...)berfungsi dengan baik di Firefox dan Chrome. Nilai default diubah tetapi nilai aktual hanya diubah jika pengguna belum mengubahnya. Namun, setAttributetidak disarankan karena kompatibilitas browser. Apakah ada kemungkinan lain?
JojOatXGME

55

jika formulir Anda berisi bidang input seperti

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

maka Anda dapat menulis kode dalam javascript seperti yang diberikan di bawah ini untuk menetapkan nilainya sebagai

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

52

Saya menggunakan fungsi 'setAttribute':

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

18
valueharus diakses langsung menggunakan notasi titik: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute Anda hanya menggunakan set / getAttribute untuk berurusan dengan nilai asli. Setelah DOM dimuat, .valuemerupakan nilai kerja aktual elemen.
Chris Baker

4
@ ChrisBaker Saya akan memberi +1000 jawaban ini jika saya bisa. Saya memiliki aplikasi pihak ke-3 yang memindai bidang input untuk mengotomatiskan aplikasi (halaman saya dirender dalam Kontrol yaitu tertanam). Ini adalah skenario unik di mana bidang input dikonsumsi oleh aplikasi klien. Bidang input tidak direset segera setelah postback menggunakan .value dalam fungsi siap dokumen saya. Ketika saya memiliki postback async berikutnya, pengguna akan memulai, itu akan menggunakan kembali nilai input ini untuk mengotomatiskan sesuatu yang mereka klik sebelumnya dan saya membutuhkan halaman untuk "melupakannya". Ini adalah saus ajaib yang saya butuhkan. Pepe dan Chris terima kasih!
MikeTeeVee

3
Saya menggunakan Yii 2.0 dan mengatur .value = '' secara langsung tidak akan menjalankan validasi formulir dengan benar di lapangan. Menggunakan setAttribute ('value', '...') ditangani dengan benar. Terima kasih!
ekscrypto

Saya memiliki masalah aneh yang diselesaikan dengan setAttribute. Masalah saya adalah mengubah nilai input melalui panggilan fungsi, mengubah input yang terakhir diubah juga.
SAMPro

Saya bisa menetapkan nilai ke input modal pop-up (teks) hanya menggunakan jawaban ini. Nilai tidak bekerja untuk saya. Terima kasih
Ula

19

Coba ini.

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

// or

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

2
Jangan pernah mengatur nilai non-teks ke bidang tersebut. Jika Anda membaca kembali Anda akan membaca string (!) Di beberapa browser)
socketpair

18

Jawabannya sangat sederhana

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

Atau jika Anda ingin menghindari JavaScript sepenuhnya: Anda dapat mendefinisikannya hanya menggunakan HTML

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

6
Luar biasa bahwa hanya satu orang di sini yang menyarankan menggunakan valueatribut ...
Algy Taylor

@AlgyTaylor menghargai usaha Anda dan terima kasih atas komentar Anda yang luar biasa
php-coder

15

Jika Anda menggunakan beberapa formulir, Anda dapat menggunakan:

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

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

3
Alasan saya menyukai jawaban ini, adalah karena Anda menggunakan atribut "nama" formulir daripada ID elemen DOM, mengapa menambahkan bidang ID ke setiap input formulir ketika Anda tidak perlu?
tremor

@tremor sepenuhnya setuju, dan ini adalah jawaban pertama yang saya temukan menggunakan "nama" bukan "id".
alpukat

8

Jawaban sederhana bukan dalam Javascript cara paling sederhana untuk mendapatkan placeholder adalah melalui atribut place holder

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

1
Masalahnya adalah ini tidak bekerja untuk Internet Explorer sama sekali. Jika Anda tahu Anda tidak akan memiliki klien IE, maka ya, ini adalah jawaban terbaik.
Sifu

2
@Sifu Ini mungkin sebenarnya hal yang baik untuk dilakukan bahkan jika Anda tidak tahu Anda memiliki IE klien (mungkin selain solusi JavaScript) karena akan juga kembali mengatur nilai ketika lapangan dikosongkan.
ahruss

1
@Sifu kapan IE tidak mendukung atribut placeholder, gunakan IE dan pergi ke www.1c3br3ak3r-multimedia.ca dan lihat bilah pencarian, ia menggunakan atribut placeholder
RWolfe

1
@Jdoonan belum lama berselang - caniuse.com/#feat=input-placeholder placeholder didukung di IE10 dan lebih tinggi
danwellman

6

Itu mudah; Contohnya adalah:

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

atau

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

atau

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

3
setAttribute ('value', 'Value'); tidak menetapkan nilai yang terlihat di kotak teks untuk saya di Chrome.
Curtis

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


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

Anda juga dapat mengubah nilai default ke nilai baru

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

1

Bagian ini Anda gunakan dalam html

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

Ini javaScript:

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

0

Anda juga dapat mencoba:

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

3
Mengatur nilai baru tidak menetapkan nilai standar. Karena itu, ini tidak menyelesaikan masalah. Anda harus mengatakan itu sebagai komentar pada posting setelah Anda mendapatkan reputasi yang cukup.
Daniel Cheung
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.