Bagaimana untuk Menghentikan Borang daripada Dihantar pada Tekan Kekunci ENTER?

Menghalang Penyerahan Borang pada ENTER Keypress

Dalam aplikasi web, kekunci ENTER sering digunakan untuk menghantar borang. Walau bagaimanapun, kadangkala adalah wajar untuk menghalang borang daripada diserahkan pada kekunci ENTER. Di bawah ialah dua kaedah untuk mencapai ini:

Kaedah 1: Pengendali Onkeypress

Kaedah ini menggunakan pengendali acara onkeypress pada borang. Dengan mencipta fungsi yang menyemak sama ada kekunci yang ditekan ialah ENTER (kod kekunci 13) dan membenarkan penyerahan borang hanya jika ia bukan ENTER, kita boleh menghalang penyerahan borang serta-merta. Kod untuk pendekatan ini ialah:

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;

Kaedah 2: Delegasi Acara dengan JavaScript Moden

Pendekatan yang lebih moden menggunakan ES20xx dan delegasi acara melibatkan penetapan pendengar penekan kekunci pada keseluruhan dokumen. Kaedah ini menyemak sama ada borang yang mengandungi input sasaran mempunyai atribut khas yang menunjukkan bahawa tekan kekunci ENTER harus menyerahkan borang tersebut. Kod JavaScript dan HTML yang berkaitan:

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;
    }
  }
}

<form>

Kedua-dua kaedah ini berkesan menghalang borang daripada diserahkan pada tekan kekunci ENTER sambil membenarkan input textarea, yang secara semula jadi menggunakan ENTER untuk pemisah baris, berfungsi secara normal.

Atas ialah kandungan terperinci Bagaimana untuk Menghentikan Borang daripada Dihantar pada Tekan Kekunci ENTER?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!