Bagaimana cara menonaktifkan input type = text?

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.

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

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.

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.

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

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