Bagaimana untuk Menghalang Penyerahan Borang Web pada ENTER Keypress?

Menghalang Penyerahan Borang Web pada Tekan Kekunci ENTER

Apabila mereka bentuk aplikasi berasaskan web, selalunya wajar untuk menghalang kekunci ENTER daripada menyerahkan borang . Ini boleh dicapai menggunakan JavaScript.

Penyelesaian:

Semakan 2012 ( Pengendali Sebaris)

Tentukan semak fungsiMasukkan ke kendalikan tekan kekunci ENTER:

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

Tugaskan pengendali ini kepada borang:

document.querySelector('form').onkeypress = checkEnter;

Ini menghalang penyerahan pada ENTER untuk semua elemen kecuali kawasan teks.

Semakan 2024 ( Perwakilan Acara)

Laksanakan pendekatan yang lebih moden menggunakan perwakilan acara:

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

function logClear(...txt) {
  console.clear();
  console.log(...txt);
}

Tambahkan atribut data-enter-for-submit pada elemen yang ingin anda serahkan pada ENTER :

<input data-enter-for-submit="1" 
    placeholder="enter text, try using enter to submit">

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