JavaScript: キーボード イベントをキャプチャしてそれに反応する
この記事では、JavaScript でさまざまなキーボード イベントをキャッチして応答する方法について説明します。理解しやすいように実際の例をいくつか示します。
JavaScript はインターネットの中核テクノロジーの 1 つです。これはほとんどの Web サイトで使用されており、プラグインを必要とせずにすべての最新の Web ブラウザーでサポートされています。このシリーズでは、日々の JavaScript 開発に役立つさまざまなヒントやコツについて説明します。
JavaScript 開発者は、キーボード イベントを処理し、それに基づいてアクションを実行する必要がある機能を実装する必要がある場合があります。幸いなことに、JavaScript には、さまざまな種類のキーボード イベントを処理できる組み込みの KeyboardEvent オブジェクトが用意されています。
JavaScript のキーボード イベント
JavaScript では、KeyboardEvent オブジェクトは、キー ダウン、キー ダウン、およびキー アップの 3 つのイベントを提供します。
キーボードの任意のキーを押すと、一連のイベントが次の順序で発生します。
- キーを押してください ＃＃＃ボタン＃＃＃ ＃＃＃ボタン＃＃＃
- キーボードのいずれかのキーが押されると、キー イベントがトリガーされます。また、キーが長く押されると、キー押下イベントが繰り返しトリガーされます。
- キー イベントは主に、印刷可能な文字が押されたときにトリガーされ、キー イベントの後にトリガーされます。実際、キー イベントは、キー イベントによって生成された文字を中継するために使用されます。ほとんどの場合、文字以外のキーではキー イベントが発生しません。一部のブラウザーはこのイベントをサポートしていますが、このイベントは Web 標準から削除されるため、このイベントに依存することはお勧めできません。
最後に、キーが放されたときにキー イベントが発生します。基本的に、キープレス イベントとキーダウン イベントの組み合わせにより、どのキーが押されたかを示すコードが得られます。
keyと
code という 2 つの重要なプロパティを提供します。 key 属性には押された文字が入力され、code 属性には文字の物理キーの位置が入力されます。たとえば、a 文字キーを押すと、キー プロパティには a が設定され、code プロパティには KeyA# が設定されます。 ＃＃ 絶え間ない。ただし、押したキーコードは文字と同じであるとは限りません。ユーザーが Dvorak などの代替キーボード レイアウトを設定している場合、同じキー コードを押すと異なる文字が生成されます。
上記は、JavaScript のキーボード イベントの概要です。次のセクションからは、これらのイベントがどのように機能するかを理解するために、実際の例とともにこれらのイベントについて説明します。
キーダウン
このセクションでは、
keydown イベントが JavaScript でどのように機能するかを学びます。キーボードのいずれかのキーが押されると、keydown
イベントがトリガーされます。
次の例を簡単に見てみましょう。
リーリー
ご覧のとおり、keydown
ユーザーが
ctrl a または ctrl A
リーリー まず、ctrlKey は KeyboardEvent
オブジェクトの特別なプロパティであり、keydown イベントがトリガーされたときに Ctrl が押されたかどうかを示します ## ＃ 鍵。したがって、ctrlKey が true の場合は、Ctrl キーが押されたことを意味します。
次に、押された文字の keyCode 値を確認します。それが 65 または
である場合、それは a またはA を Ctrl キーと一緒に押します。 KeyboardEvent オブジェクトの <strong>keyCode</strong> プロパティは、押されたキーの Unicode 文字コードを返します。同様に、KeyboardEvent オブジェクトの shiftKey プロパティを使用することもできます。これにより、keypress イベント中に Shift キーが押されたかどうかがわかります。引き金。
最後に、HTML フォームの入力フィールドに文字のみを許可する方法を示す次の例を見てみましょう。
リーリー
上記の例では、入力テキスト ボックスに keydown イベントを定義しました。したがって、ユーザーがテキストボックスにテキストを入力すると、
関数が呼び出されます。
allowOnlyAlphabets 関数では、イベント オブジェクトの keyCode プロパティの値を、アルファベットの有効な Unicode 範囲に対して検証します。したがって、allowOnlyAlphabets 関数は、ユーザーが有効なアルファベット文字を押した場合は true を返し、それ以外の場合は false を返します。最終的に、ユーザーは文字以外の文字を入力できなくなります。
<h2>
<code>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 事件。
<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>
在上面的示例中，我们在输入文本框上定义了 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 中使用键盘事件以及几个实际示例。
以上がJavaScript: キーボード イベントをキャプチャしてそれに反応するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7569
15
1386
52
87
11
28
108
WordPressは初心者にとって簡単ですか？
Apr 03, 2025 am 12:02 AM
WordPressは、初心者が簡単に始めることができます。 1.バックグラウンドにログインした後、ユーザーインターフェイスは直感的であり、シンプルなダッシュボードは必要なすべての関数リンクを提供します。 2。基本操作には、コンテンツの作成と編集が含まれます。 WysiWygエディターは、コンテンツの作成を簡素化します。 3.初心者は、プラグインとテーマを介してウェブサイトの機能を拡張でき、学習曲線は存在しますが、練習を通じて習得できます。
ワードプレスは何に適していますか？
Apr 07, 2025 am 12:06 AM
wordpressisisgoodforvirtalayanywebprojectoitsversitilityasacms.itexcelsin：1）ユーザーフレンドリー、柔軟性と柔軟性と顧客化の維持、およびプルージンの数値化; 3）seooptimization;
WordPressを3日で学ぶことはできますか？
Apr 09, 2025 am 12:16 AM
3日以内にWordPressを学ぶことができます。 1.テーマ、プラグインなどのマスター基本知識。2。インストールや作業原則などのコア関数を理解します。 3.例を使用して、基本的および高度な使用法を学びます。 4.デバッグテクニックとパフォーマンスの最適化の提案を理解します。
WordPressの費用はいくらですか？
Apr 05, 2025 am 12:13 AM
WordPress自体は無料ですが、使用するには余分な費用がかかります。1。WordPress.comは、無料から支払いまでの範囲のパッケージを提供し、価格は月あたり数ドルから数十ドルまでの範囲です。 2。WordPress.orgでは、ドメイン名（年間10〜20米ドル）とホスティングサービス（月額5〜50米ドル）を購入する必要があります。 3.ほとんどのプラグインとテーマは無料で、有料価格は数十から数百ドルです。適切なホスティングサービスを選択し、プラグインとテーマを合理的に使用し、定期的に維持および最適化することにより、WordPressのコストを効果的に制御および最適化できます。
WixまたはWordPressを使用する必要がありますか？
Apr 06, 2025 am 12:11 AM
WIXは、プログラミングの経験がないユーザーに適しており、WordPressは、よりコントロールと拡張機能を必要とするユーザーに適しています。 1）WIXはドラッグアンドドロップエディターとリッチテンプレートを提供しているため、Webサイトをすばやく構築できます。 2）オープンソースのCMSとして、WordPressには巨大なコミュニティとプラグインエコシステムがあり、詳細なカスタマイズと拡張をサポートしています。
WordPressはまだ無料ですか？
Apr 04, 2025 am 12:06 AM
WordPressのコアバージョンは無料ですが、使用中に他の料金が発生する場合があります。 1。ドメイン名とホスティングサービスには支払いが必要です。 2。高度なテーマとプラグインが充電される場合があります。 3.プロフェッショナルサービスと高度な機能が請求される場合があります。
WordPressブログを始める方法：初心者向けのステップバイステップガイド
Apr 17, 2025 am 08:25 AM
ブログは、人々が自分の意見、意見、意見をオンラインで表現するための理想的なプラットフォームです。多くの初心者は自分のウェブサイトを構築することに熱心ですが、技術的な障壁やコストの問題を心配することをためらっています。ただし、プラットフォームが初心者の能力とニーズを満たすために進化し続けるにつれて、今まで以上に容易になり始めています。 この記事では、テーマの選択からプラグインの使用まで、セキュリティとパフォーマンスを向上させ、独自のWebサイトを簡単に作成できるように、WordPressブログを構築する方法を段階的に導きます。 ブログのトピックと方向を選択してください ドメイン名を購入したり、ホストを登録する前に、カバーする予定のトピックを特定することをお勧めします。個人的なウェブサイトは、旅行、料理、製品のレビュー、音楽、またはあなたの興味を引き起こす趣味を中心に展開できます。あなたが本当に興味を持っている領域に焦点を当てることは継続的な執筆を奨励することができます
なぜWordPressを使用するのはなぜですか？
Apr 02, 2025 pm 02:57 PM
人々は、その力と柔軟性のためにWordPressを使用することを選択します。 1）WordPressは、さまざまなWebサイトのニーズに適した、使いやすさとスケーラビリティを備えたオープンソースのCMSです。 2）豊富なテーマとプラグイン、巨大なエコシステム、強力なコミュニティサポートがあります。 3）WordPressの作業原則は、テーマ、プラグイン、コア関数に基づいており、PHPとMySQLを使用してデータを処理し、パフォーマンスの最適化をサポートします。
