Bagaimana cara menonaktifkan input type = text?

123

Saya ingin menonaktifkan penulisan di kolom input jenis textmenggunakan JavaScript, jika memungkinkan. Bidang masukan diisi dari database; itulah mengapa saya tidak ingin pengguna mengubah nilainya.

javascript html

— kawtousse
sumber

172

Jika Anda mengetahui hal ini saat halaman dirender, yang sepertinya Anda lakukan karena database memiliki nilai, lebih baik menonaktifkannya saat dirender daripada JavaScript. Untuk melakukan itu, cukup tambahkan readonlyatribut (atau disabled, jika Anda juga ingin menghapusnya dari pengiriman formulir) ke <input>, seperti ini:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

— Nick Craver
sumber

81

Saya tidak tahu mengapa ini mendapat suara, itu tidak menjawab pertanyaan itu. Kami mengharapkan jawaban javascript.

— Sophie

3

@Sophie itu adalah cara paling tepat bagi penanya untuk melakukannya berdasarkan situasi mereka, mungkin perubahan judul dilakukan.

— Nick Craver

6

mode nonaktif mencegah peristiwa klik pada kotak masukan, hanya baca tidak. fyi.

— knutole

Agar bidang masukan "hanya-baca" TERLIHAT seperti bidang "nonaktif", setel 'style = "color: grey; background-color: # F0F0F0;"'. (ini adalah komentar untuk jawaban ini )

— Jake Toronto

2

Perlu diingat bahwa browser bebas mengabaikan atribut "nonaktif" atau "hanya baca" dan metode ini tidak boleh diandalkan untuk menjaga agar data tidak diperbarui ... jika kode sisi server yang memproses formulir akan tetap menerima nilai dari bidang itu dan memperbaruinya, siapa pun yang cukup paham untuk membuat formulir mereka sendiri dapat melewati "penonaktifan" ini ... ini untuk kenyamanan antarmuka pengguna hanya di lingkungan tepercaya. Cara sebenarnya untuk mencegahnya adalah dengan logika sisi server.

— Aaron Wallentine

206

document.getElementById('foo').disabled = true;

atau

document.getElementById('foo').readOnly = true;

Perhatikan bahwa readOnlydi camelCase harus bekerja dengan benar di Firefox (ajaib).

Demo: https://jsfiddle.net/L96svw3c/ - menjelaskan sedikit perbedaan antara disableddan readOnly.

— hudolejev
sumber

3

Ini berhasil untuk saya. Versi jquery adalah $ ('input'). Prop ('disabled', true)

— Daniel Sun Yang

Saya terlambat tujuh tahun dalam hal ini - tetapi apakah ada perbedaan semantik antara keduanya di tahun 2017?

— Jules

2

Anda belum terlambat sama sekali, keajaibannya masih ada (: Saya tidak ingat platform apa yang saya uji saat itu, tetapi hari ini readonly(huruf kecil) masih tidak berfungsi di Firefox 52 di Ubuntu - seharusnya casing unta.

— hudolejev

Mengapa ini tidak berhasil untuk saya? Saya membuat inputelemen dengan id="gate"dan saya mencoba kode Anda, yang tampaknya tidak berhasil untuk saya ...

— Voldemort's Wrath

21

Jika data diisi dari database, Anda mungkin mempertimbangkan untuk tidak menggunakan <input>tag untuk menampilkannya. Namun demikian, Anda dapat menonaktifkannya langsung di tag:

<input type='text' value='${magic.database.value}' disabled>

Jika nanti Anda perlu menonaktifkannya dengan Javascript, Anda dapat menyetel atribut "disabled":

document.getElementById('theInput').disabled = true;

Alasan saya menyarankan untuk tidak menampilkan nilai sebagai an <input>adalah karena, menurut pengalaman saya, hal itu menyebabkan masalah tata letak. Jika teksnya panjang, maka <input>pengguna perlu mencoba dan menggulir teks, yang bukan sesuatu yang orang normal akan tebak untuk dilakukan. Jika Anda hanya memasukkannya ke dalam <span>atau sesuatu, Anda memiliki lebih banyak fleksibilitas gaya.

— Runcing
sumber

3

Ingatlah bahwa menonaktifkan dapat membuat teks hampir tidak dapat dibaca di beberapa browser. Anda mungkin lebih baik menggunakan atribut readonly, misalnya <input type = "text" value = "foo" readonly>

— Olly Hodgson

7

Anda juga bisa dengan jquery:

$('#foo')[0].disabled = true;

Contoh kerja:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

Luaskan cuplikan

— Chani Poz
sumber

1

@Chani Poz Anda memanggil native js setter pada objek jquery yang akan menghasilkan error. $ ('# foo') [0] .disabled = true atau $ ('# foo'). get (0) .disabled = true akan melakukan tugasnya

— Arek Kostrzeba

6

Dapatkan referensi ke kotak input Anda sesuka Anda (mis. document.getElementById('mytextbox')) Dan setel readonlypropertinya ke true:

myInputBox.readonly = true;

Alternatifnya, Anda cukup menambahkan properti ini sebaris (tidak diperlukan JavaScript):

<input type="text" value="from db" readonly="readonly" />

— Roatin Marth
sumber

Jika Anda menulis HTML (bukan XHTML), itu akan menjadi <input type = "text" value = "from db" readonly>

— Olly Hodgson