javascript tekan enter not submit

Dalam pembangunan web, JavaScript ialah bahasa pengaturcaraan yang sangat diperlukan. Dalam banyak kes, kami perlu menangkap beberapa operasi pengguna, seperti kekunci Enter, untuk mencapai kesan interaktif tertentu. Walau bagaimanapun, kadangkala kami tidak mahu gelagat penyerahan borang lalai bagi kekunci Enter berlaku. Artikel ini akan memperkenalkan cara untuk menghalang acara penyerahan lalai kekunci Enter melalui JavaScript.

Tingkah laku lalai kekunci Enter

Dalam kebanyakan borang web, apabila pengguna menekan kekunci Enter dalam kotak teks satu baris, borang diserahkan secara automatik. Ini ialah tingkah laku lalai yang disertakan dengan penyemak imbas, dan mungkin tidak sesuai untuk beberapa kesan interaktif, seperti kotak carian mudah. Apabila pengguna memasukkan kata kunci dalam kotak carian dan menekan kekunci Enter, jika tingkah laku penyerahan lalai tidak dihalang, penyemak imbas akan menyegarkan halaman secara automatik dan kata kunci yang dimasukkan oleh pengguna akan hilang.

Halang peristiwa penyerahan lalai kekunci Enter

Untuk menghalang peristiwa penyerahan lalai kekunci Enter, anda boleh menggunakan kaedah event.preventDefault() dalam JavaScript. Kaedah ini boleh menghalang kelakuan lalai elemen, seperti menghalang acara penyerahan lalai borang.

Andaikan kita mempunyai kod HTML berikut:

<form>
  <input type="text" id="search-input">
</form>

Kita boleh menghalang peristiwa penyerahan borang lalai kekunci Enter melalui kod JavaScript berikut:

const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    event.preventDefault();
    console.log('阻止回车键默认提交事件');
  }
});

Dalam kod di atas , Kami menambahkan pendengar acara keydown pada kotak input, yang akan dicetuskan apabila pengguna menekan papan kekunci. Dalam pengendali acara, kami menentukan sama ada pengguna menekan kekunci Enter dan jika ya, panggil event.preventDefault() untuk menghalang peristiwa penyerahan lalai borang. Pada masa yang sama, kami mengeluarkan mesej kepada konsol supaya kami boleh mengesahkan sama ada kod itu berkesan.

Selain menghalang peristiwa penyerahan lalai borang, kami juga boleh melaksanakan kod JavaScript kami sendiri selepas kaedah event.preventDefault() untuk mencapai kesan interaktif tertentu.

Nota Lain

Apabila melaksanakan menghalang kekunci Enter daripada menyerahkan acara, anda perlu memberi perhatian kepada perkara berikut:

1. Kaedah event.preventDefault() hanya mengendalikan peristiwa Tingkah laku lalai di dalam program berkuat kuasa, jika kaedah dipanggil di luar pengendali acara, ia tidak akan memberi kesan.
2. Dalam acara keydown, kita boleh menggunakan event.keyCode untuk mendapatkan kod kunci yang ditekan oleh pengguna Kod kunci kekunci Enter ialah 13.
3. Dalam beberapa kes, seperti apabila logik kekunci enter perlu diproses dalam kotak carian sambil membenarkan borang diserahkan seperti biasa, kami boleh menyelesaikan masalah ini melalui acara menggelegak. Dalam pengendali acara kekunci kotak carian, jika kami tidak menghalang gelagat lalai, acara itu akan menggelembung ke elemen borang, dengan itu mencetuskan acara penyerahan lalai borang. Oleh itu, kami boleh menambah pendengar acara serah pada elemen borang dan melaksanakan kod kami sendiri apabila borang diserahkan.

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('表单被提交！');
})

Kesimpulan

JavaScript boleh dengan mudah menghalang kekunci Enter daripada menyerahkan acara secara lalai, dengan itu mencapai kesan interaksi yang lebih bebas. Kita boleh menghalang gelagat lalai borang melalui kaedah event.preventDefault() untuk mencapai kesan interaktif yang kita perlukan. Pada masa yang sama, kita juga perlu memberi perhatian kepada masa dan cara untuk menghalang tingkah laku lalai dalam pengendali acara untuk mengelakkan ralat yang tidak dijangka.

Atas ialah kandungan terperinci javascript tekan enter not submit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!