input jquery tidak boleh diedit

Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menjadikan kotak input borang tidak boleh diedit.

Dalam banyak aplikasi, kami biasanya menggunakan elemen input, yang merupakan salah satu elemen HTML asas yang digunakan untuk menerima input teks. Dalam sesetengah kes, kami ingin menetapkan beberapa kotak input kepada mod baca sahaja untuk menghalang pengguna daripada mengedit dalam kotak input. Ini mungkin kerana kandungan teks dijana oleh pangkalan data atau API, atau ditetapkan untuk mengelakkan penyalahgunaan.

Secara umumnya, untuk menetapkan kotak input kepada keadaan baca sahaja, kita perlu beroperasi pada bahagian belakang untuk mengawal output atribut HTML (seperti baca sahaja). Tetapi dalam beberapa kes, kami mungkin tidak mempunyai akses kepada kod bahagian belakang atau tidak boleh menukar atribut HTML dengan mudah Dalam kes ini, kami boleh mengendalikan situasi ini dengan menggunakan jQuery.

Berikut ialah beberapa contoh yang menunjukkan cara menggunakan jQuery untuk menetapkan kotak input kepada keadaan baca sahaja:

Contoh 1: Menggunakan kaedah .prop

.prop() dalam Kaedah jQuery digunakan untuk mendapatkan atau menetapkan nilai harta. Anda boleh menggunakan kaedah .prop() untuk menetapkan kotak input kepada mod baca sahaja. Kod berikut menunjukkan cara menggunakan kaedah .prop() untuk mencapai ini:

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').prop('readonly', true);
});

Dengan cara ini, kotak input akan ditetapkan kepada mod baca sahaja dan pengguna tidak akan dapat mengedit teks di dalamnya. Jika kita perlu mengubah suai nilai kotak input, kita hanya perlu menggunakan kaedah .val() jQuery.

Contoh 2: Menggunakan kaedah .attr

Contoh di atas menunjukkan cara menggunakan kaedah .prop() untuk menetapkan kotak input kepada mod baca sahaja. Tetapi dalam beberapa kes, kaedah prop() mungkin tidak berfungsi dengan betul. Contohnya, dalam beberapa versi jQuery, prop hanya boleh mengawal elemen yang wujud selepas dokumen dimuatkan dan mungkin tidak berkesan untuk elemen berikutnya yang ditambahkan melalui AJAX atau kaedah lain. Pada ketika ini kita boleh menggunakan kaedah .attr() dan bukannya kaedah .prop(). Berikut ialah kod sampel menggunakan kaedah .attr():

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

Kod ini juga akan menetapkan kotak input kepada mod baca sahaja. Kita boleh menggunakan kaedah removeAttre() untuk memadamkan atribut baca sahaja supaya kotak input boleh diedit semula.

Contoh 3: Menggunakan CSS

Kaedah kedua-dua contoh di atas adalah untuk mengubah suai secara langsung nilai atribut elemen Pelaksanaannya mudah tetapi mungkin memusnahkan ketulenan HTML. Jika kita ingin menjadikan kotak input tidak boleh diedit tanpa mengubah nilai atribut elemen, kita boleh menggunakan gaya CSS untuk mengawalnya. Secara khusus, anda boleh menetapkan gaya CSS untuk elemen input untuk melarang pengeditan pengguna. Berikut ialah contoh kod menggunakan CSS:

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- CSS -->
input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

Kod ini akan menambah gaya pada semua kotak input dengan atribut baca sahaja, menjadikannya mempunyai latar belakang kelabu dan memaparkan simbol larangan, menghalang pengguna daripada mengedit. Kaedah ini tidak bergantung pada JavaScript dan tidak mengubah nilai atribut HTML. Apabila kami perlu menetapkan semula kotak input kepada boleh diedit, kami hanya perlu mengalih keluar input[baca sahaja] dan peraturan yang sepadan dalam CSS.

Kongsi ringkasan

Dalam aplikasi, kadangkala perlu menetapkan kotak input kepada mod baca sahaja. Dengan jQuery, ini boleh dicapai dengan mudah untuk mengelakkan pengguna daripada membuat kesilapan. Kita boleh menggunakan kaedah .prop() dan .attr() untuk menukar nilai atribut elemen, atau kita boleh menggunakan gaya CSS untuk mengawal kotak input daripada boleh diedit. Selain itu, kami juga boleh menggunakan beberapa kaedah lain untuk mencapai tujuan yang sama, seperti menetapkan atribut yang dilumpuhkan elemen input kepada benar, atau menggunakan pelbagai pemalam jQuery. Contoh yang ditunjukkan dalam artikel ini hanyalah salah satu kaedah pelaksanaan jQuery, dan pembaca boleh memilih mengikut keperluan aplikasi sebenar.

Atas ialah kandungan terperinci input jquery tidak boleh diedit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!