Bagaimana untuk menentukan kotak teks dalam javascript supaya hanya teks boleh dimasukkan

JavaScript ialah bahasa pengaturcaraan yang sering digunakan dalam pembangunan web kami. Ia memberikan kami banyak kemahiran pengendalian yang kaya untuk melaksanakan banyak operasi pada elemen halaman web. Sebagai contoh, kita boleh mentakrifkan kotak teks melalui JavaScript untuk membenarkan teks sahaja dimasukkan. Dalam artikel ini, kita akan membincangkan cara melaksanakan fungsi ini menggunakan JavaScript.

Pertama, kita perlu memahami beberapa sifat kotak teks. Dalam HTML, apabila kita mentakrifkan kotak teks, kita boleh menetapkan atribut jenisnya kepada "teks", dan kita juga boleh menetapkan beberapa atribut lain untuk kotak teks, seperti: panjang maksimum, saiz dan pemegang tempat. Sifat ini boleh menetapkan beberapa fungsi asas kotak teks untuk kita, seperti mengehadkan bilangan aksara input, saiz kotak teks dan ruang letak borang.

Untuk menetapkan kotak teks supaya membenarkan input teks sahaja, kami memerlukan JavaScript untuk melaksanakannya. Untuk melakukan ini, kita boleh menggunakan acara onkeypress, yang dicetuskan apabila kekunci ditekan. Kami boleh menyemak kod kunci apabila peristiwa itu berlaku dan menyekat semua input kunci bukan abjad. Berikut ialah kod pelaksanaan khusus:

// 获取文本框元素
let input = document.getElementById("input");

// 绑定 keypress 事件
input.addEventListener("keypress", function(event) {
  let charCode = event.charCode;

  // 检查输入的是否为字母或退格键
  if (charCode !== 0 && !/^[a-zA-Z]$/.test(String.fromCharCode(charCode))) {
    // 阻止按键事件的默认行为，即不允许输入非字母字符
    event.preventDefault();
  }
});

Dalam kod ini, kita mula-mula mendapatkan elemen kotak teks, dan kemudian mengikat pengendali peristiwa penekan kekunci padanya, yang akan dicetuskan apabila pengguna menekan papan kekunci Masuk peristiwa ini, kita boleh menggunakan fungsi checkCharCode() untuk menentukan sama ada aksara yang dimasukkan ialah huruf. Jika aksara bukan abjad dimasukkan, kelakuan lalai acara utama boleh dihalang melalui fungsi preventDefault() supaya aksara bukan abjad tidak dipaparkan.

Selain itu, kami juga boleh menggunakan ungkapan biasa untuk menyemak sama ada input dalam kotak teks adalah sah. Sebagai contoh, kita boleh menggunakan ungkapan biasa /^[a-zA-Z]+$/g untuk memadankan situasi di mana hanya huruf dimasukkan Kodnya adalah seperti berikut:

// 获取文本框元素
let input = document.getElementById("input");

// 绑定 keypress 事件
input.addEventListener("keypress", function(event) {
  let charCode = event.charCode;

  // 检查输入的是否为字母或退格键
  if (charCode !== 0 && !/^[a-zA-Z]$/.test(String.fromCharCode(charCode))) {
    // 阻止按键事件的默认行为，即不允许输入非字母字符
    event.preventDefault();
  }

  // 检查文本框中的格式是否全部为字母
  if (!/^[a-zA-Z]+$/.test(input.value)) {
    input.value = input.value.replace(/[^a-zA-Z]+/g, "");
  }
});

Dalam contoh ini , kami menggunakan ungkapan biasa Semak setiap aksara dalam kotak teks. Jika aksara yang dimasukkan bukan huruf atau kekunci ruang belakang, gunakan preventDefault() untuk menghalangnya daripada dimasukkan. Pada masa yang sama, kami juga menggunakan ungkapan biasa untuk menyemak kandungan keseluruhan kotak teks, dan jika terdapat aksara bukan abjad, gantikannya dengan aksara nol. Ini memastikan bahawa hanya terdapat aksara abjad dalam kotak teks.

Ringkasnya, melalui pengenalan di atas, kita boleh mengetahui cara menggunakan JavaScript untuk menyedari bahawa kotak teks hanya boleh memasukkan teks. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa sekatan ini tidak sempurna. Contohnya, jika pengguna memilih untuk menampal rentetan bukan abjad, kaedah ini tidak berfungsi dengan baik untuk menghalang perkara ini. Oleh itu, kita boleh menambah cara lain untuk mengukuhkan sekatan input kotak teks untuk mendapatkan pengalaman dan keselamatan input yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menentukan kotak teks dalam javascript supaya hanya teks boleh dimasukkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!