Bagaimana untuk menetapkan kotak input supaya tidak boleh diedit dalam jQuery

Kotak input ialah salah satu elemen penting dalam aplikasi web. Kadangkala kita perlu memaparkan beberapa maklumat teks statik pada halaman, tetapi tidak membenarkan pengguna mengubah suainya. Jika kotak input boleh diedit, pengguna boleh menukar kandungan teks dengan mudah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menetapkan kotak input supaya tidak boleh diedit.

1. Gunakan atribut baca sahaja

Atribut baca sahaja ialah atribut standard HTML, yang boleh menetapkan kotak input kepada keadaan baca sahaja. Pengguna boleh melihat teks dalam kotak input tetapi tidak boleh membuat sebarang perubahan padanya. Cuma tambahkan atribut baca sahaja pada teg kotak input:

<input type="text" readonly="readonly" value="只读文本" />

Dalam jQuery, anda boleh menggunakan kaedah attr() untuk menetapkan nilai atribut kotak input. Contohnya:

// 将class为readOnly的输入框设置为只读状态
$(".readOnly").attr("readonly", "readonly");

2. Gunakan atribut disable

Atribut disable juga ialah atribut standard HTML, yang boleh menetapkan kotak input kepada keadaan dilumpuhkan. Tidak seperti atribut baca sahaja, atribut yang dilumpuhkan melumpuhkan kotak input dan pengguna tidak boleh menukar kandungan kotak input dengan mengklik atau input papan kekunci. Cuma tambahkan atribut yang dilumpuhkan pada teg kotak input:

<input type="text" disabled="disabled" value="禁用文本" />

Dalam jQuery, anda boleh menggunakan kaedah prop() untuk menetapkan nilai atribut kotak input. Contohnya:

// 将id为disabledInput的输入框设置为不可用状态
$("#disabledInput").prop("disabled", true);

3. Menggunakan gaya CSS

Menggunakan gaya CSS juga merupakan cara yang berkesan untuk melumpuhkan kotak input. Kita boleh mencapai status baca sahaja atau tidak tersedia dengan menetapkan gaya kotak input. Antaranya, menetapkan warna latar belakang, sempadan, kursor, acara penunjuk dan atribut gaya lain bagi kotak input boleh menjadikan kotak input kelihatan seperti keadaan baca sahaja.

/* 只读样式 */
.readOnly {
  background-color: #f5f5f5;
  border: none;
  cursor: default;
  pointer-events: none;
}
/* 不可用样式 */
.disabled {
  background-color: #f5f5f5;
  border: none;
  color: #ccc;
}

Kemudian, dalam jQuery, anda boleh menggunakan kaedah addClass() dan kaedah removeClass() untuk menukar gaya baca sahaja atau tidak tersedia bagi kotak input:

// 将class为readOnly的输入框添加只读样式
$(".readOnly").addClass("readOnly");
// 将class为disabled的输入框添加不可用样式
$(".disabled").addClass("disabled");

Dengan kaedah di atas, kami boleh melumpuhkan kotak input dengan mudah supaya pengguna tidak boleh menukar kandungan teks. Dalam pembangunan sebenar, kita boleh memilih kaedah yang berbeza untuk mencapai keadaan baca sahaja atau tidak tersedia bagi kotak input mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kotak input supaya tidak boleh diedit dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!