JavaScript: Menguasai Pengendalian Acara Papan Kekunci

Pembangun tapak web mahu pembaca berinteraksi dengan tapak web mereka dalam beberapa cara. Pelawat boleh menatal ke atas dan ke bawah halaman, menulis dalam medan input, mengklik pautan untuk mengakses halaman lain atau menekan kombinasi kekunci untuk mencetuskan tindakan tertentu. Sebagai pembangun, anda seharusnya dapat menangkap semua acara ini dan menyediakan fungsi yang diperlukan kepada pengguna.

Dalam tutorial ini, tumpuan kami adalah pada pengendalian acara papan kekunci dalam JavaScript. Kami akan mempelajari tentang pelbagai jenis acara papan kekunci, mengendalikan acara utama khas dan mendapatkan maklumat tentang kekunci yang ditekan atau dilepaskan.

Jenis acara papan kekunci

Acara papan kekunci terbahagi kepada tiga jenis. Ini dipanggil keydown, keyup dan keyup. keydown、keypress 和 keyup。

只要按下某个键，就会触发 keydown 事件。所有键都会被触发。它们是否产生角色价值并不重要。例如，按键盘上的 A 或 Alt 键将触发 keydown 事件。

keypress 事件已弃用。它仅在按下产生字符值的键时触发。例如，按 A 键将触发此事件，但按 Alt 键则不会。您应该考虑使用 keydown 事件来代替它。

当用户按下的键被释放时，将触发 keyup 事件。

假设用户连续按下键盘上的任意键。在这种情况下，keydown 事件将被重复触发。一旦用户释放密钥，就会触发 keyup 事件。

监听键盘事件

此时，我想提一些相当明显的事情。键盘是一种输入设备，用于从用户那里获取一些输入。我们根据该输入采取行动。但是，用户还有其他方式发送输入。

如果您想跟踪用户在表单中填写的任何输入字段，那么在所述输入上使用其他事件（例如 change ）更有意义。

此外，键盘事件仅为可以接收焦点的元素生成。这包括 <input> 元素、<textarea></textarea> 元素、<summary></summary> 元素以及具有 contentEditable 或 tabindex 属性的其他元素。

例如，除非设置 tabindex 或 contentEditable 属性，否则您将无法侦听段落元素上的键盘事件。但是，它最终会在 DOM 树中冒泡，因此您仍然可以将 keydown 或 keyup 事件侦听器附加到文档。

这是一个例子：

document.addEventListener("keydown", keyIsDown);

function keyIsDown(event) {
    // Do whatever you want!
}

您还可以将回调作为箭头函数提供：

document.addEventListener("keydown", (event) => {
    // Do whatever you want!
});

从键盘事件获取信息

在上一节的基本代码片段中，我们定义了一个回调函数。该函数接受 event 对象作为其参数。此 event 对象包含您可能需要访问的与 keydown 或 keyup 事件相关的所有信息。

以下是您应该了解的一些有用属性：

1. key：该属性返回一个字符串，表示所按键的字符值。
2. code：此属性返回一个字符串，表示按下的物理键的代码。
3. repeat：如果长时间按住某个键，该属性将返回布尔值 true，导致 keydown 事件多次触发。
4. altKey：如果用户按下 Alt 键（在 Windows 上）或 Option 键（在在 macOS 上）当 keydown 事件触发时。
5. ctrlKey：如果用户在 keydown 事件触发时按下 Control 键，则此属性返回布尔值 true。
6. metaKey：如果用户在 keydown 事件触发时按下 Meta 键，则此属性返回布尔值 true。
7. shiftKey：如果用户在 keydown 事件触发时按下 Shift 键，则此属性返回布尔值 true。

您会注意到，我在所有最后四个属性描述中都包含了“当 keydown 事件被触发时”部分。这意味着，如果在执行上述任一操作时按下 A 或 3 等键，这些属性的值将为 true ，用于 keydown

Selagi kekunci ditekan, acara keydown akan dicetuskan. Semua kunci akan dicetuskan. Tidak kira sama ada mereka menjana nilai watak. Contohnya, menekan kekunci A atau Alt pada papan kekunci anda akan mencetuskan acara keydown.

Acarakeypress telah ditamatkan. Ia hanya menyala apabila kekunci yang menghasilkan nilai aksara ditekan. Contohnya, menekan kekunci A akan mencetuskan peristiwa ini, tetapi menekan kekunci Alt tidak akan. Anda harus mempertimbangkan untuk menggunakan acara keydown. 🎜 🎜Apabila kekunci yang ditekan oleh pengguna dilepaskan, acara keyup akan dicetuskan. 🎜 🎜Andaikan pengguna menekan sebarang kekunci pada papan kekunci secara berterusan. Dalam kes ini, acara keydown akan dicetuskan berulang kali. Sebaik sahaja pengguna melepaskan kunci, acara keyup dicetuskan. 🎜

Dengar acara papan kekunci🎜 🎜Pada ketika ini, saya ingin menyebut sesuatu yang agak jelas. Papan kekunci ialah peranti input yang digunakan untuk mendapatkan sedikit input daripada pengguna. Kami mengambil tindakan berdasarkan input itu. Walau bagaimanapun, terdapat cara lain untuk pengguna menghantar input. 🎜 🎜Jika anda ingin menjejaki mana-mana medan input yang diisi oleh pengguna dalam borang, lebih masuk akal untuk menggunakan acara lain pada input tersebut (seperti change ). 🎜 🎜Selain itu, acara papan kekunci hanya dijana untuk elemen yang boleh menerima fokus. Ini termasuk elemen <input>, elemen <textarea>, elemen <summary> dan elemen dengan contentEditable atau atribut tabindex elemen lain. 🎜 🎜Sebagai contoh, anda tidak akan dapat mendengar acara papan kekunci pada elemen perenggan melainkan anda menetapkan atribut tabindex atau contentEditable. Walau bagaimanapun, ia akhirnya akan menggelembung dalam pepohon DOM, jadi anda masih boleh melampirkan pendengar acara keydown atau keyup pada dokumen. 🎜 🎜Berikut adalah contoh: 🎜

const circle = document.querySelector(".circle");

document.addEventListener("keydown", (event) => {
    
  if (event.code == "KeyR" && event.repeat != true) {
    let rVal = Math.floor(200 + Math.random() * 200);
    circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`);
  }

  if (event.key == "B" && event.shiftKey == true) {
    let rVal = Math.floor(10 + Math.random() * 40);
    circle.setAttribute("style", `border: ${rVal}px solid orangered;`);
  }

  if (event.code == "ArrowUp" && event.repeat != true) {
    circle.classList.add("animate__animated", "animate__bounce");
  }
});

document.addEventListener("keyup", (event) => {
  if (event.code == "ArrowUp") {
    setTimeout(() => {
      circle.classList.remove("animate__animated", "animate__bounce");
    }, 4000);
  }
});

🎜Anda juga boleh menyediakan panggilan balik sebagai fungsi anak panah: 🎜 rrreee

Mendapatkan maklumat daripada acara papan kekunci🎜 🎜Dalam coretan kod asas dari bahagian sebelumnya, kami menentukan fungsi panggil balik. Fungsi ini menerima objek event sebagai parameternya. Objek event ini mengandungi semua maklumat yang mungkin anda perlukan untuk akses berkaitan dengan acara keydown atau keyup. 🎜 🎜Berikut adalah beberapa sifat berguna yang perlu anda ketahui: 🎜

1. key: Sifat ini mengembalikan rentetan yang mewakili nilai aksara kekunci yang ditekan.
2. kod: Sifat ini mengembalikan rentetan yang mewakili kod kekunci fizikal yang ditekan.
3. ulang: Jika kekunci ditekan untuk masa yang lama, sifat ini akan mengembalikan nilai Boolean true, menyebabkan keydown code> acara Dicetuskan beberapa kali.
4. altKey: Jika pengguna menekan kekunci Alt (pada Windows) atau kekunci Option (pada macOS) Apabila acara keydown menyala.
5. ctrlKey: Jika pengguna menekan kekunci Control apabila acara keydown dijalankan, sifat ini mengembalikan nilai Boolean < kod >benar.
6. metaKey: Jika pengguna menekan kekunci Meta apabila acara keydown dijalankan, sifat ini mengembalikan nilai Boolean < kod >benar.
7. shiftKey: Jika pengguna menekan kekunci Shift apabila acara keydown dijalankan, sifat ini mengembalikan nilai Boolean < kod >benar.

🎜Anda akan perasan bahawa saya telah memasukkan bahagian "apabila acara keydown dicetuskan" dalam semua empat perihalan sifat terakhir. Ini bermakna jika anda menekan kekunci seperti A atau 3 semasa melakukan mana-mana tindakan di atas, nilai sifat ini akan menjadi true, menggunakan Dalam acara keydown. Kekunci juga ditekan. 🎜 🎜Selepas memfokuskan pada demo CodePen di bawah, cuba tekan kekunci individu atau kombinasi kekunci untuk melihat nilai sifat yang berbeza berubah. 🎜

如果您按键盘顶部的 3 键而不按 Shift 键，则 key 属性的值将变为 3 > 并且 code 属性的值变为 Digit3。但是，按下 Shift 后，key 属性的值将变为 #，而 code 属性仍为 Digit3。

您可以尝试使用其他组合键进行相同的操作，您会注意到 key 属性的值会根据您按下的键而变化。但是，code 属性的值保持不变。

键盘上的某些键通常是重复的。例如，有两个 Shift 键。按左键会将 code 的值设置为 ShiftLeft。按右边会将 code 的值设置为 ShiftRight。同样，有两组数字键。字母上方的代码将为您提供 Digit<Number> 代码，而数字键盘上的代码将为您提供 Numpad<Number> 代码。

这意味着，如果您的代码依赖于检测特定键，则务必确保您使用 code 属性来检查按下了哪个键。

我想提的另一件重要的事情是，并不是每个人都使用 QWERTY 键盘，而且他们的键盘甚至可能不是英文的。在这种情况下，使用 key 属性来检查按下了哪个键很容易出错。

响应键盘事件

现在我们知道了如何监听键盘事件并从中提取信息，我们可以编写一些代码来对某些特定键的 keydown 和 keyup 事件做出反应。考虑以下代码片段：

const circle = document.querySelector(".circle");

document.addEventListener("keydown", (event) => {
    
  if (event.code == "KeyR" && event.repeat != true) {
    let rVal = Math.floor(200 + Math.random() * 200);
    circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`);
  }

  if (event.key == "B" && event.shiftKey == true) {
    let rVal = Math.floor(10 + Math.random() * 40);
    circle.setAttribute("style", `border: ${rVal}px solid orangered;`);
  }

  if (event.code == "ArrowUp" && event.repeat != true) {
    circle.classList.add("animate__animated", "animate__bounce");
  }
});

document.addEventListener("keyup", (event) => {
  if (event.code == "ArrowUp") {
    setTimeout(() => {
      circle.classList.remove("animate__animated", "animate__bounce");
    }, 4000);
  }
});

我们为 keydown 事件创建了一个侦听器，并为 keyup 事件创建了另一个侦听器。这两个事件都附加到 document。

在 keydown 内，我们检查三个不同的密钥。我使用了 R 键的 event.code 属性来向您展示您可以单独按 R 键或与任何修饰键组合使用，并且它仍会将圆的半径更改为随机值。另一方面，我们使用 event.key 属性来检查其值是否为 B。仅当您同时按 Shift 和 B 时，此块中的代码才会执行​​，因为这种组合会导致 event.key 属性成为大写“B”。

在 keyup 内，我们检查 ArrowUp 键上的 keyup 事件。一旦钥匙被解除，我们会在四秒的延迟后删除之前附加的类。

以下 CodePen 演示展示了这一切的实际效果：

您应该尝试在上述代码中添加自己的逻辑，以便当用户按下A、S、W键时圆圈会移动> 和D。

最终想法

在本教程中，我们学习了 JavaScript 中键盘事件的基础知识。按下并释放键盘上的按键将分别触发 keydown 和 keyup 事件。与这些事件关联的 event 对象包含您确定按下了哪个键并采取适当操作所需的所有信息。

请记住，键盘只是众多可能的输入设备之一。因此，使用键盘检测任何输入可能并不总是能达到预期效果。在这种情况下，您应该考虑使用与输入相关的事件。

Atas ialah kandungan terperinci JavaScript: Menguasai Pengendalian Acara Papan Kekunci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!