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 objekKeyboardEventterbina dalam yang membolehkan anda mengendalikan pelbagai jenis acara papan kekunci.KeyboardEvent对象，它允许您处理不同类型的键盘事件。
在 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);
如您所见，我们创建了一个监听器来监听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);
首先，ctrlKey是KeyboardEvent对象的一个特殊属性，它告诉您在触发keydown事件时是否按下了Ctrl键。因此，如果ctrlKey为 true，则表示按下了Ctrl键。
接下来，我们检查按下的字符的keyCode值，如果是65或97，则表示是a或A与Ctrl键一起按下。KeyboardEvent对象的keyCode属性返回按下的键的 Unicode 字符代码。同样，您还可以使用KeyboardEvent对象的 shiftKey 属性，该属性告诉您在按下按键事件时是否按下了Shift键。触发。
最后，让我们看一下以下示例，该示例演示如何在 HTML 表单的输入字段中仅允许使用字母。
在上面的示例中，我们在输入文本框上定义了keydown事件。因此，当用户在文本框中输入任何文本时，它会调用allowOnlyAlphabets函数。在allowOnlyAlphabets函数中，我们根据字母表的有效 Unicode 范围验证了事件对象的keyCode属性的值。因此，如果用户按下有效的字母字符，则allowOnlyAlphabets函数将返回true，否则将返回false
KeyboardEventmenyediakan 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.
kod. Atribut
keydiisi dengan aksara yang ditekan, manakala atribut
codediisi dengan kedudukan kunci fizikal aksara. Contohnya, jika anda menekan kekunci aksara
a, atribut kunci akan diisi dengan
adan atribut
codeakan diisi dengan
KeyAMalar. 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. keydownacaraDalam bahagian ini, kita akan mempelajari cara acara
keydownberfungsi dalam JavaScript. Peristiwa
keydowndicetuskan 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);
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 + aatau
ctrl + A.
keydown event, keyValue: a keydown event, codeValue: KeyA keyup event, keyValue: a keyup event, codeValue: KeyA
ctrlKeyialah sifat khas objek
KeyboardEvent, yang memberitahu anda sama ada
ditekan apabila acarakeydowntelah dipecat. Oleh itu, jikactrlKeyadalah benar, ini bermakna kekunciCtrltelah ditekan. Seterusnya, kami menyemak nilaikeyCodebagi aksara yang ditekan Jika ia65atau97, ia bermakna ia adalaha <. /code> strong> atauAbersama-sama dengan kekunciCtrl. SifatkeyCodeobjekKeyboardEventmengembalikan kod aksara Unicode bagi kekunci yang ditekan. Begitu juga, anda boleh menggunakan sifatShiftKeybagi objekKeyboardEvent, yang memberitahu anda sama ada kekunciShiftditekan semasa acara penekanan kekunci. pencetus. Akhir sekali, mari kita lihat contoh berikut yang menunjukkan cara membenarkan hanya huruf dalam medan input borang HTML.
keydownpada kotak teks input. Jadi apabila pengguna memasukkan sebarang teks dalam kotak teks, ia memanggil fungsiallowOnlyAlphabets. Dalam fungsiallowOnlyAlphabets, kami mengesahkan nilai sifatkeyCodeobjek acara terhadap julat abjad Unicode yang sah. Oleh itu, fungsiallowOnlyAlphabetsakan mengembalikantruejika pengguna menekan aksara abjad yang sah danfalsesebaliknya. 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);
在上面的示例中，当您按下任意键时，将首先触发keydown事件，然后触发keyup事件。例如，如果您按a键，您应该在控制台上看到以下输出。请务必注意事件的触发顺序。
keydown event, keyValue: a keydown event, codeValue: KeyA keyup event, keyValue: a keyup event, codeValue: KeyA
让我们看一下以下示例，它演示了如何在项目中使用keyup事件。
在上面的示例中，我们在输入文本框上定义了onkeyup事件。因此，当用户在文本框中输入任何文本时，它都会调用getSearchResults函数。在getSearchResults函数中，我们将进行 AJAX 调用来获取搜索关键字的搜索结果。这也称为实时搜索，因为它会立即显示搜索结果，而无需刷新整个页面。
KeyboardEvent对象属性在最后一节中，我将总结KeyboardEvent对象的重要属性。事实上，我们已经在到目前为止讨论的示例中看到了一些常用的属性，例如key和code。我们还将在本节中讨论一些其他重要属性。
key：返回按下的字符。例如，如果按下a字符，则会返回a。code：返回字符的物理键码。例如，如果按下a字符，则会返回KeyA。keyCode：返回按下的按键的Unicode字符代码。ctrlKey：告诉您触发按键事件时是否按下Ctrl键。altKey：告诉您触发按键事件时是否按下了Alt键。shiftKey：告诉您触发按键事件时是否按下Shift键。metaKey：告诉你触发按键事件时是否按下了Meta键。在大多数情况下，Meta键是键盘上位于Ctrl和Alt键之间的键。位置：返回键盘或设备上按键的位置。如您所见，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!
Bagaimana untuk melaraskan kepala rokok dalam sistem WIN10 rujuk
Bagaimana untuk menyelesaikan masalah perisian antivirus win11 tidak boleh dibuka
Masa terputus perkhidmatan Windows 10
Nombor halaman perkataan bermula dari halaman ketiga sebagai 1 tutorial
Bagaimana untuk menyelesaikan masalah kehilangan steam_api.dll
Perbezaan antara penghala dan kucing
Lapan fungsi yang paling biasa digunakan dalam excel
Anda memerlukan kebenaran daripada pentadbir untuk membuat perubahan pada fail ini
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
