Bagaimana untuk menghalang pengguna daripada memasukkan kandungan dalam kotak input dalam jquery

Dalam pembangunan web, kadangkala perlu mengehadkan kandungan input pengguna dalam kotak input Pada masa ini, beberapa kaedah jQuery mesti digunakan untuk mengendalikan kotak input. Artikel ini terutamanya memperkenalkan cara menggunakan jQuery untuk menghalang pengguna daripada memasukkan kandungan dalam kotak input.

1. Fungsi lalai untuk melumpuhkan kotak input

Sebelum melumpuhkan input dalam kotak input melalui jQuery, kita perlu terlebih dahulu memahami atribut jenis teg input teg input terutamanya termasuk yang berikut:

1. teks: kotak teks
2. kata laluan: kotak kata laluan
3. radio: butang radio
4. kotak semak: semak kotak
5. serahkan: butang hantar
6. set semula: butang set semula
7. fail: muat naik fail
8. tersembunyi: medan tersembunyi
9. tarikh: tarikh pemilih
10. nombor: kotak input nombor
11. e-mel: kotak input e-mel
12. tel: kotak input nombor telefon
13. carian: kotak input carian

Berikut ialah kod yang menggunakan jQuery untuk melumpuhkan fungsi lalai kotak input:

$(document).ready(function() {
  // 禁止文本框和密码框的默认功能
  $('input[type="text"],input[type="password"]').bind('keypress', function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
    }
  });
});

Dalam kod di atas, kami mula-mula menggunakan kaedah .ready() jQuery untuk menunggu halaman untuk dimuatkan, dan kemudian mengikatnya Peristiwa penekan kekunci menghalang fungsi penyerahan pulangan pengangkutan lalai bagi kotak input. Antaranya, event.keyCode mewakili kod kekunci papan kekunci yang ditekan, dan 13 mewakili kod kekunci kekunci Enter.

2. Lumpuhkan input dalam kotak input

Kadangkala, kita perlu melarang pengguna daripada memasukkan teks dalam kotak input :

$(document).ready(function() {
  // 禁止文本框和密码框输入
  $('input[type="text"],input[type="password"]').bind('input propertychange', function(event) {
    this.value = this.value.replace(/[^\u0000-\u00ff]/g, ''); // 只允许输入英文、数字和中文等ASCII字符
  });
});

Dalam kod di atas, kami mendengar perubahan kandungan dalam kotak input dengan mengikat peristiwa .input dan .propertychange. Dalam fungsi pemprosesan acara, kami memanggil kaedah replace() bagi objek String untuk menapis aksara bukan ASCII melalui ungkapan biasa /¹/g, sekali gus mencapai kesan melarang input.

3. Lumpuhkan kotak input

Kadangkala, kami perlu melumpuhkan semua kotak input Berikut ialah kod untuk menggunakan jQuery untuk melumpuhkan kotak input:

$(document).ready(function() {
  // 禁用所有输入框
  $('input').attr('disabled', 'disabled');
});

Dalam kod di atas, kami menggunakan jQuery untuk memilih semua teg input dan menetapkan atribut "dilumpuhkan" padanya melalui kaedah .attr(), sekali gus melumpuhkan semua kotak input.

4. Lumpuhkan satu kotak input

Kadangkala, kita hanya perlu melumpuhkan satu kotak input Berikut ialah kod untuk menggunakan jQuery untuk melumpuhkan satu kotak input:

$(document).ready(function() {
  // 禁用文本框和密码框输入
  $('#input-id').attr('disabled', 'disabled');
});

Dalam Dalam kod di atas, kami memperoleh kotak input yang ditentukan melalui pemilih "#" + id, dan menetapkan atribut "dilumpuhkan" kepada mereka melalui kaedah .attr(), dengan itu melumpuhkan kotak input yang ditentukan.

Ringkasan:

Artikel ini terutamanya memperkenalkan beberapa kaedah menggunakan jQuery untuk melumpuhkan input dalam kotak input, termasuk melumpuhkan fungsi lalai kotak input, melumpuhkan input dalam kotak input, melumpuhkan semua kotak input dan melumpuhkan kotak input tunggal. Saya harap ia akan membantu anda dalam kerja sebenar pembangunan web anda.

Atas ialah kandungan terperinci Bagaimana untuk menghalang pengguna daripada memasukkan kandungan dalam kotak input dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!