Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mendapatkan nilai papan kekunci dalam JavaScript

Bagaimana untuk mendapatkan nilai papan kekunci dalam JavaScript

PHPz
PHPzasal
2023-04-25 10:47:083021semak imbas

Sebagai bahasa yang digunakan secara meluas dalam pengaturcaraan Web, JavaScript boleh digunakan untuk melaksanakan fungsi interaksi pengguna. Mendapatkan nilai papan kekunci juga merupakan operasi yang biasa digunakan dalam JavaScript. Dalam artikel ini, kami akan menerangkan cara mendapatkan nilai papan kekunci menggunakan JavaScript.

Acara papan kekunci dalam JavaScript

Dalam JavaScript, kami boleh menggunakan acara papan kekunci untuk menangkap input papan kekunci. Terdapat tiga jenis acara papan kekunci: kekunci kekunci, tekan kekunci dan kekunci.

  1. acara keydown: dicetuskan apabila pengguna menekan sebarang kekunci pada papan kekunci, termasuk kekunci khas (seperti Shift dan Ctrl) dan kekunci bukan khas (seperti huruf dan nombor).
  2. acara menekan kekunci: Dicetuskan apabila pengguna menekan sebarang kekunci pada papan kekunci, tetapi ia hanya termasuk kekunci yang boleh menghasilkan aksara. Kekunci khas tidak menjana peristiwa penekan kekunci.
  3. acara kekunci: dicetuskan apabila pengguna melepaskan sebarang kekunci pada papan kekunci.

Melalui acara papan kekunci ini, kita boleh mengetahui kekunci mana yang ditekan oleh pengguna pada papan kekunci dan kita boleh mendapatkan nilai kod kunci bagi kekunci yang sepadan.

Konsep nilai kod kunci

Nilai kod kunci merujuk kepada pengekodan digital yang dihantar daripada peranti input papan kekunci ke komputer. Kod ini mewakili pengecam unik untuk setiap kekunci pada papan kekunci. Setiap nilai kod kunci mempunyai nilai kod ASCII unik yang boleh mewakili aksara yang sepadan.

Cara untuk mendapatkan nilai papan kekunci dalam JavaScript

Dalam JavaScript, kami menggunakan sifat event.keyCode untuk mendapatkan nilai papan kekunci. Gunakan sifat ini dalam pengendali acara untuk mendapatkan nilai papan kekunci dalam acara papan kekunci. Berikut ialah contoh:

document.addEventListener("keydown", function(event) {
    alert(event.keyCode);
});

Kod ini mendengar acara keydown dan menggunakan fungsi amaran untuk memaparkan nilai KeyCode apabila peristiwa dicetuskan.

Selain itu, kita juga boleh menggunakan sifat berkaitan objek acara yang lain untuk mendapatkan nilai papan kekunci, seperti:

  1. event.key: mewakili aksara yang sepadan dengan kekunci yang ditekan , seperti huruf kecil "a" atau nombor "3".
  2. event.code: Menunjukkan lokasi fizikal kekunci yang ditekan Contohnya, nilai kod kekunci "a" ialah "KeyA", dan nilai kod kekunci angka "3" ialah "Digit3. ".

Perlu diambil perhatian bahawa atribut KeyCode tidak disokong dalam sesetengah penyemak imbas, manakala atribut kunci dan kod adalah standard baharu dan boleh digunakan dalam kebanyakan penyemak imbas moden.

Nilai papan kekunci yang biasa digunakan

Nilai papan kekunci yang biasa digunakan termasuk huruf, nombor dan kekunci khas (seperti Ctrl, Shift dan Enter, dsb.). Berikut ialah beberapa nilai papan kekunci biasa​​​dan nilai kod kunci yang sepadan:

  • Kekunci huruf dan angka: nilai Kod kunci adalah sama dengan nilai kod ASCII Contohnya, nilai Kod kunci kekunci a ialah 97, dan nilai kod kunci kekunci A ialah 65, dan nilai papan kekunci yang sepadan dengan nombor 0-9 ialah 48-57 masing-masing.
  • Kekunci khas: Nilai kod kunci kekunci Ctrl ialah 17, nilai Kod kunci kekunci Shift ialah 16, nilai Kod kunci kekunci Enter ialah 13 dan nilai Kod kunci kekunci Tab ialah 9.

Melalui nilai papan kekunci ini, kami boleh menentukan sama ada pengguna menekan kekunci tertentu dan bertindak balas dengan sewajarnya.

Ringkasan

Artikel ini memperkenalkan cara untuk mendapatkan nilai papan kekunci dalam JavaScript. Melalui fungsi pengendalian acara, kami boleh menangkap acara papan kekunci dan mendapatkan nilai papan kekunci yang sepadan. Nilai papan kekunci yang biasa digunakan termasuk huruf, nombor dan kekunci khas Membiasakan diri dengan nilai papan kekunci ini akan membantu mencapai fungsi interaksi pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai papan kekunci dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn