Tetapkan nilai bidang input

442

Bagaimana Anda menetapkan nilai default <input>bidang teks formulir di JavaScript?

Sebastian Opperman
sumber

Jawaban:

818

Ini adalah salah satu cara melakukannya:

document.getElementById("mytext").value = "My value";
James
sumber
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' ; 
Varada
sumber
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>
Pepe Amoedo
sumber
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
dallinchase
sumber
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">
php-coder
sumber
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>
David Caissy
sumber
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" />
RWolfe
sumber
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>
ultimatetechie
sumber
4
document.getElementById("fieldId").value = "Value";

atau

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

atau

document.getElementById("fieldId").setAttribute('value','Value');
Arun Karnawat
sumber
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>
Tobiloba
sumber
1

Bagian ini Anda gunakan dalam html

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

Ini javaScript:

<script>
document.getElementById("latitude").value=25;
</script>
Amranur Rahman
sumber
0

Anda juga dapat mencoba:

document.getElementById('theID').value = 'new value';
Bogdan Mates
sumber
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