JavaScript: tangkap peristiwa papan kekunci dan bertindak balas terhadapnya-WordTekan-php.cn

JavaScript: tangkap peristiwa papan kekunci dan bertindak balas terhadapnya

Dalam artikel ini, kita akan membincangkan cara menangkap dan bertindak balas kepada acara papan kekunci yang berbeza dalam JavaScript. Saya akan menunjukkan kepada anda beberapa contoh dunia nyata untuk menjadikannya mudah difahami.

JavaScript ialah salah satu teknologi teras Internet. Ia digunakan oleh kebanyakan laman web dan disokong oleh semua pelayar web moden tanpa memerlukan pemalam. Dalam siri ini, kami akan membincangkan petua dan helah berbeza yang akan membantu anda dengan pembangunan JavaScript harian anda.

Sebagai pembangun JavaScript, kadangkala anda perlu melaksanakan fungsi yang memerlukan anda mengendalikan acara papan kekunci dan melakukan tindakan berdasarkannya. Nasib baik, JavaScript menyediakan objek KeyboardEvent terbina dalam yang membolehkan anda mengendalikan pelbagai jenis acara papan kekunci. KeyboardEvent 对象，它允许您处理不同类型的键盘事件。

JavaScript 中的键盘事件

在 JavaScript 中，KeyboardEvent 对象提供了三个事件：按键按下、按键按下和按键弹起。

当您按下键盘上的任意键时，一系列事件将按以下顺序发生。

按下键
按键
按键

当按下键盘上的任意键时，会触发按键事件。并且如果长时间按下某个键，则会重复触发按键按下事件。

按键事件主要在按下任何可打印字符时触发，并在按键事件后触发。事实上，按键事件用于中继按键事件产生的字符。大多数情况下，非字符键不会引发按键事件。尽管某些浏览器支持此事件，但不建议依赖此事件，因为它将从网络标准中删除。

按键事件已被弃用，并将在现代浏览器中逐步淘汰。

最后，释放按键时会引发按键事件。基本上，按键按下和按键按下事件的组合为您提供了一个代码，该代码指示按下的键。

每个键盘事件都提供两个重要的属性：key 和 code。 key 属性用按下的字符填充，而 code 属性用字符的物理键位置填充。例如，如果按 a 字符键，则 key 属性将填充为 a，并且 code 属性将填充为 KeyA 常量。但是，按下的键码不一定与字符相同！如果用户设置了备用键盘布局，例如 Dvorak，则按相同的键代码将产生不同的字符。

以上是 JavaScript 中键盘事件的简要概述。从下一节开始，我们将讨论这些事件以及现实世界的示例，以了解它们是如何工作的。

`keydown` 事件

在本节中，我们将了解 keydown 事件如何在 JavaScript 中工作。当按下键盘上的任意键时，会触发 keydown 事件。

让我们快速浏览一下以下示例。

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyValue: " + keyValue);
  console.log("codeValue: " + codeValue);
}, false);

Salin selepas log masuk

如您所见，我们创建了一个监听器来监听 keydown 事件。每当按下任何键时，都会调用我们的侦听器，并将该键的值和代码记录到控制台。继续运行它，看看它是如何工作的。

让我们看一下以下示例，该示例演示如何检测用户是否按下了 ctrl + a 或 ctrl + A。

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey) {
     if (event.keyCode == 65 || event.keyCode == 97) {
         console.log("You have just pressed Ctrl + a/A!");
     }
  }
}, false);

Salin selepas log masuk

首先， ctrlKey 是 KeyboardEvent 对象的一个特殊属性，它告诉您在触发 keydown 事件时是否按下了 Ctrl 键。因此，如果 ctrlKey 为 true，则表示按下了 Ctrl 键。

接下来，我们检查按下的字符的 keyCode 值，如果是 65 或 97，则表示是 a 或 A 与 Ctrl 键一起按下。 KeyboardEvent 对象的 keyCode 属性返回按下的键的 Unicode 字符代码。同样，您还可以使用 KeyboardEvent 对象的 <strong>shiftKey</strong> 属性，该属性告诉您在按下按键事件时是否按下了 Shift 键。触发。

最后，让我们看一下以下示例，该示例演示如何在 HTML 表单的输入字段中仅允许使用字母。

<script>
function allowOnlyAlphabets(event) {
  var charCode = event.keyCode;

  if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
    return true;
  else
    return false;
}
</script>
<html>
  <body>
    <div>
        <input type="text" onkeydown="return allowOnlyAlphabets(event);">
    </div>
  </body>
</html>

Salin selepas log masuk

在上面的示例中，我们在输入文本框上定义了 keydown 事件。因此，当用户在文本框中输入任何文本时，它会调用 allowOnlyAlphabets 函数。在 allowOnlyAlphabets 函数中，我们根据字母表的有效 Unicode 范围验证了事件对象的 keyCode 属性的值。因此，如果用户按下有效的字母字符，则 allowOnlyAlphabets 函数将返回 true，否则将返回 false

Acara papan kekunci dalam JavaScript

Dalam JavaScript, objek KeyboardEvent menyediakan tiga acara: key down, key down dan key up. 🎜 🎜Apabila anda menekan sebarang kekunci pada papan kekunci, satu siri peristiwa akan berlaku dalam susunan berikut. 🎜

Kekunci tekan
Butang
Butang

🎜Acara utama dicetuskan apabila sebarang kekunci pada papan kekunci ditekan. Dan jika kekunci ditekan untuk masa yang lama, peristiwa penekan kekunci akan dicetuskan berulang kali. 🎜 🎜Acara utama dicetuskan terutamanya apabila mana-mana aksara boleh cetak ditekan dan dicetuskan selepas peristiwa penting. Malah, peristiwa utama digunakan untuk menyampaikan watak yang dihasilkan oleh peristiwa utama. Dalam kebanyakan kes, kekunci bukan aksara tidak menimbulkan peristiwa penting. Walaupun sesetengah penyemak imbas menyokong acara ini, bergantung pada acara ini tidak disyorkan kerana ia akan dialih keluar daripada standard web. 🎜 Acara penekan kekunci telah ditamatkan dan akan dihentikan secara berperingkat dalam penyemak imbas moden. 🎜Akhir sekali, acara kunci dilepaskan apabila kunci dilepaskan. Pada asasnya, gabungan acara keydown dan keydown memberi anda kod yang menunjukkan kekunci mana yang ditekan. 🎜 🎜Setiap acara papan kekunci menyediakan dua sifat penting: kunci dan kod. Atribut key diisi dengan aksara yang ditekan, manakala atribut code diisi dengan kedudukan kunci fizikal aksara. Contohnya, jika anda menekan kekunci aksara a, atribut kunci akan diisi dengan a dan atribut code akan diisi dengan

KeyA</code >Malar. Namun, kod kekunci yang ditekan tidak semestinya sama dengan watak! Jika pengguna mempunyai susun atur papan kekunci ganti, seperti Dvorak, menekan kod kekunci yang sama akan menghasilkan aksara yang berbeza. 🎜
🎜Di atas ialah gambaran ringkas acara papan kekunci dalam JavaScript. Bermula dalam bahagian seterusnya, kita akan membincangkan peristiwa ini bersama-sama dengan contoh dunia sebenar untuk memahami cara ia berfungsi. 🎜
<h2><code>keydown

acara 🎜Dalam bahagian ini, kita akan mempelajari cara acara keydown berfungsi dalam JavaScript. Peristiwa keydown dicetuskan apabila sebarang kekunci pada papan kekunci ditekan. 🎜 🎜Mari kita lihat contoh berikut. 🎜

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keydown event, keyValue: " + keyValue);
  console.log("keydown event, codeValue: " + codeValue);

}, false);

document.addEventListener('keyup', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyup event, keyValue: " + keyValue);
  console.log("keyup event, codeValue: " + codeValue);
}, false);

Salin selepas log masuk

🎜Seperti yang anda lihat, kami mencipta pendengar untuk mendengar acara keydown. Setiap kali sebarang kekunci ditekan, pendengar kami akan dipanggil dan nilai serta kod kunci itu akan dilog masuk ke konsol. Teruskan dan jalankannya dan lihat cara ia berfungsi. 🎜 🎜Mari kita lihat contoh berikut yang menunjukkan cara untuk mengesan sama ada pengguna menekan ctrl + a atau ctrl + A. 🎜

keydown event, keyValue: a
keydown event, codeValue: KeyA
keyup event, keyValue: a
keyup event, codeValue: KeyA

Salin selepas log masuk

🎜Pertama sekali, ctrlKey ialah sifat khas objek KeyboardEvent, yang memberitahu anda sama ada ditekan apabila acara keydown telah dipecat. Oleh itu, jika ctrlKey adalah benar, ini bermakna kekunci Ctrl telah ditekan. 🎜 🎜Seterusnya, kami menyemak nilai keyCode bagi aksara yang ditekan Jika ia 65 atau 97, ia bermakna ia adalah a <. /code> strong> atau A bersama-sama dengan kekunci Ctrl. Sifat keyCode objek KeyboardEvent mengembalikan kod aksara Unicode bagi kekunci yang ditekan. Begitu juga, anda boleh menggunakan sifat ShiftKey bagi objek KeyboardEvent, yang memberitahu anda sama ada kekunci Shift ditekan semasa acara penekanan kekunci. pencetus. 🎜 🎜Akhir sekali, mari kita lihat contoh berikut yang menunjukkan cara membenarkan hanya huruf dalam medan input borang HTML. 🎜
<script> function getSearchResults(event, element) { if (element.value.length > 6) { var searchKeyword = element.value; // make an AJAX call to fetch search results for "searchKeyword" } } </script> <html> <body> <div> <input type="text" onkeyup="return getSearchResults(event, this);"> </div> </body> </html>
Salin selepas log masuk
Salin selepas log masuk
🎜Dalam contoh di atas, kami menentukan acara keydown pada kotak teks input. Jadi apabila pengguna memasukkan sebarang teks dalam kotak teks, ia memanggil fungsi allowOnlyAlphabets. Dalam fungsi allowOnlyAlphabets, kami mengesahkan nilai sifat keyCode objek acara terhadap julat abjad Unicode yang sah. Oleh itu, fungsi allowOnlyAlphabets akan mengembalikan true jika pengguna menekan aksara abjad yang sah dan false sebaliknya. Hasil akhirnya ialah pengguna tidak akan dapat memasukkan sebarang aksara selain huruf. 🎜
keyup 事件

在本节中，我们将了解 keyup 事件如何工作。事实上，它的工作原理与 keydown 事件非常相似，唯一的区别是它是在释放按键时触发，而不是在按下按键时触发。

让我们看一下下面的例子。

document.addEventListener('keydown', (event) => { var keyValue = event.key; var codeValue = event.code; console.log("keydown event, keyValue: " + keyValue); console.log("keydown event, codeValue: " + codeValue); }, false); document.addEventListener('keyup', (event) => { var keyValue = event.key; var codeValue = event.code; console.log("keyup event, keyValue: " + keyValue); console.log("keyup event, codeValue: " + codeValue); }, false);
Salin selepas log masuk
Salin selepas log masuk

在上面的示例中，当您按下任意键时，将首先触发 keydown 事件，然后触发 keyup 事件。例如，如果您按 a 键，您应该在控制台上看到以下输出。请务必注意事件的触发顺序。

keydown event, keyValue: a keydown event, codeValue: KeyA keyup event, keyValue: a keyup event, codeValue: KeyA
Salin selepas log masuk
Salin selepas log masuk

让我们看一下以下示例，它演示了如何在项目中使用 keyup 事件。

<script> function getSearchResults(event, element) { if (element.value.length > 6) { var searchKeyword = element.value; // make an AJAX call to fetch search results for "searchKeyword" } } </script> <html> <body> <div> <input type="text" onkeyup="return getSearchResults(event, this);"> </div> </body> </html>
Salin selepas log masuk
Salin selepas log masuk

在上面的示例中，我们在输入文本框上定义了 onkeyup 事件。因此，当用户在文本框中输入任何文本时，它都会调用 getSearchResults 函数。在 getSearchResults 函数中，我们将进行 AJAX 调用来获取搜索关键字的搜索结果。这也称为实时搜索，因为它会立即显示搜索结果，而无需刷新整个页面。

重要的 KeyboardEvent 对象属性

在最后一节中，我将总结 KeyboardEvent 对象的重要属性。事实上，我们已经在到目前为止讨论的示例中看到了一些常用的属性，例如 key 和 code。我们还将在本节中讨论一些其他重要属性。

<strong>key</strong>：返回按下的字符。例如，如果按下a字符，则会返回 a。

<strong>code</strong>：返回字符的物理键码。例如，如果按下a字符，则会返回 KeyA。

<strong>keyCode</strong>：返回按下的按键的Unicode字符代码。

<strong>ctrlKey</strong>：告诉您触发按键事件时是否按下Ctrl键。

<strong>altKey</strong>：告诉您触发按键事件时是否按下了Alt键。

<strong>shiftKey</strong>：告诉您触发按键事件时是否按下Shift键。

<strong>metaKey</strong>：告诉你触发按键事件时是否按下了Meta键。在大多数情况下，Meta 键是键盘上位于 Ctrl 和 Alt 键之间的键。

<strong>位置</strong>：返回键盘或设备上按键的位置。

如您所见，keyboardEvent 对象提供了各种属性，允许您检测不同的按键。在大多数情况下，您将使用 keydown 事件来检测按下的按键并执行相应的操作。正如我们之前讨论的，您不应该使用 keypress 事件，因为它迟早会被弃用。

结论

今天，我们讨论了如何在 JavaScript 中使用键盘事件以及几个实际示例。
Atas ialah kandungan terperinci JavaScript: tangkap peristiwa papan kekunci dan bertindak balas terhadapnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!