Bagaimana untuk Mencegah Penyerahan Borang Tidak Diingini pada ENTER Keypress dalam Aplikasi Web?

Halang Penyerahan Borang Web pada Tekan Kekunci ENTER

Dalam aplikasi berasaskan web, penyerahan borang secara tidak sengaja yang dicetuskan oleh kekunci ENTER boleh menjadi gangguan. Panduan ini menyediakan penyelesaian untuk mengelakkan tingkah laku yang tidak diingini tersebut.

Penyelesaian 1: Pengendali Tekan Kekunci Tersuai

Pengendali tekan kekunci tersuai boleh dilaksanakan untuk borang memintas penekanan kekunci ENTER dan menghalang penyerahan borang untuk semua elemen kecuali kawasan teks.

function checkEnter(e) {
  e = e || event;
  var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
  return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
document.querySelector('form').onkeypress = checkEnter;

Penyelesaian 2: Delegasi Acara dengan JavaScript Moden

Pendekatan yang lebih moden menggunakan perwakilan acara boleh digunakan untuk mengendalikan tekanan ENTER. Pendekatan ini melibatkan menangkap peristiwa di peringkat dokumen dan menyemak bentuk nenek moyang terdekat. Hanya elemen yang ditetapkan dengan atribut data-enter-for-submit akan mencetuskan penyerahan borang pada ENTER.

document.addEventListener(`keypress`, handle);

function handle(evt) {
  const form = evt.target.closest(`#testForm`);
  if (form) {
    if (evt.target.dataset.enterForSubmit) {
      if (evt.key === `Enter`) {
        evt.preventDefault();
        return logClear(`won't submit "${evt.target.value}"`);
      }
      return true;
    }
  }
}

Nota Tambahan

• Textareas harus dikendalikan secara berbeza, kerana menekan ENTER dalam textarea biasanya menandakan pemisah baris.
• Coretan kod yang disediakan boleh disesuaikan dan boleh disesuaikan dengan keperluan aplikasi tertentu.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Penyerahan Borang Tidak Diingini pada ENTER Keypress dalam Aplikasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!