Bagaimana untuk Menghalang Penyerahan Borang pada Enter Keypress?

Menghalang Penyerahan Borang pada ENTER Keypress

Dalam aplikasi berasaskan web, menghalang kunci ENTER daripada menyerahkan borang memastikan borang itu hanya diserahkan apabila pengguna secara eksplisit mengklik butang hantar. Pendekatan ini meningkatkan pengalaman pengguna dan menghalang penyerahan borang yang tidak disengajakan.

Untuk mengelakkan kunci ENTER daripada mencetuskan penyerahan borang, anda boleh menggunakan coretan kod berikut:

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

Setelah anda menentukan fungsi checkEnter, anda boleh melampirkannya sebagai pengendali tekan kekunci pada borang:

<form [...] onkeypress="return checkEnter(event)">

Sebagai alternatif, anda boleh menggunakan pendekatan ES20xx berikut:

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

Pendekatan ini menggunakan perwakilan acara untuk menghalang penyerahan borang apabila kekunci ENTER ditekan, membenarkan pengguna memasukkan teks berbilang baris dalam elemen textarea tanpa mencetuskan penyerahan.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Penyerahan Borang pada Enter Keypress?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!