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衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1663
14
1419
52
1313
25
1263
29
1237
24
WordPressの記事リストを調整する方法
Apr 20, 2025 am 10:48 AM
WordPressの記事リストを調整するには4つの方法があります。テーマオプションを使用し、プラグイン（投稿タイプの注文、WP投稿リスト、ボックスのものなど）を使用し、コード（functions.phpファイルに設定を追加）を使用するか、WordPressデータベースを直接変更します。
WordPressブログを始める方法：初心者向けのステップバイステップガイド
Apr 17, 2025 am 08:25 AM
ブログは、人々が自分の意見、意見、意見をオンラインで表現するための理想的なプラットフォームです。多くの初心者は自分のウェブサイトを構築することに熱心ですが、技術的な障壁やコストの問題を心配することをためらっています。ただし、プラットフォームが初心者の能力とニーズを満たすために進化し続けるにつれて、今まで以上に容易になり始めています。 この記事では、テーマの選択からプラグインの使用まで、セキュリティとパフォーマンスを向上させ、独自のWebサイトを簡単に作成できるように、WordPressブログを構築する方法を段階的に導きます。 ブログのトピックと方向を選択してください ドメイン名を購入したり、ホストを登録する前に、カバーする予定のトピックを特定することをお勧めします。個人的なウェブサイトは、旅行、料理、製品のレビュー、音楽、またはあなたの興味を引き起こす趣味を中心に展開できます。あなたが本当に興味を持っている領域に焦点を当てることは継続的な執筆を奨励することができます
パーソナライズされた結果のためにWordPressでユーザー情報をログインする方法
Apr 19, 2025 pm 11:57 PM
最近、ユーザーがお気に入りの投稿をパーソナライズされたライブラリに保存できるようにすることで、ユーザー向けのパーソナライズされたエクスペリエンスを作成する方法を示しました。一部の場所で名前を使用することで、パーソナライズされた結果を別のレベルに引き上げることができます（つまり、ウェルカム画面）。幸いなことに、WordPressにより、ユーザーのログインに関する情報を簡単に入手できます。この記事では、現在ログインしているユーザーに関連する情報を取得する方法を紹介します。 get_currentuserinfo（）を使用します。 関数。これは、テーマ（ヘッダー、フッター、サイドバー、ページテンプレートなど）のどこでも使用できます。それが機能するためには、ユーザーをログインする必要があります。したがって、使用する必要があります
親カテゴリのアーカイブページに子カテゴリを表示する方法
Apr 19, 2025 pm 11:54 PM
親カテゴリアーカイブページに子カテゴリを表示する方法を知りたいですか？分類アーカイブページをカスタマイズするときは、訪問者にとってより便利にするためにこれを行う必要がある場合があります。この記事では、親カテゴリアーカイブページに子カテゴリを簡単に表示する方法を示します。サブカテゴリが親カテゴリアーカイブページに表示されるのはなぜですか？親カテゴリアーカイブページにすべての子カテゴリを表示することにより、訪問者にとってより一般的で便利になります。たとえば、本に関するWordPressのブログを実行し、「テーマ」と呼ばれる分類法を持っている場合、「小説」、「ノンフィクション」などのサブ課題を追加して、読者ができるようにすることができます。
WordPressの有効期限後の日付で投稿を並べ替える方法
Apr 19, 2025 pm 11:48 PM
過去には、拡張後のプラグインを使用してWordPressの投稿を期限切れにする方法を共有してきました。さて、Activity List Webサイトを作成するとき、このプラグインは非常に便利であることがわかりました。期限切れのアクティビティリストを簡単に削除できます。第二に、このプラグインのおかげで、有効期限後の日付までに投稿を並べ替えることも非常に簡単です。この記事では、WordPressの有効期限後の日付で投稿を並べ替える方法を紹介します。プラグインの変更を反映してカスタムフィールド名を変更するためのコードを更新しました。コメントで私たちに知らせてくれたTajimに感謝します。特定のプロジェクトでは、イベントをカスタムポストタイプとして使用します。今
IFTTT（およびその他）でWordPressとソーシャルメディアを自動化する方法
Apr 18, 2025 am 11:27 AM
WordPress Webサイトやソーシャルメディアアカウントを自動化する方法をお探しですか？ 自動化を使用すると、WordPressのブログ投稿やFacebook、Twitter、LinkedIn、Instagramなどで自動的に共有できます。 この記事では、IFTTT、Zapier、およびUncanny Automatorを使用してWordPressとソーシャルメディアを簡単に自動化する方法を紹介します。 WordPressとソーシャルメディアを自動化する理由 WordPreを自動化します
WordPressでクエリカウントとページの読み込み時間を表示する方法
Apr 19, 2025 pm 11:51 PM
ユーザーの1人が、フッターにクエリの数とページの読み込み時間を表示する方法を他のWebサイトに尋ねました。これをウェブサイトのフッターでよく見ることがよくあり、「1.248秒で64クエリ」のようなものを表示する場合があります。この記事では、WordPressにクエリの数とページの読み込み時間を表示する方法を紹介します。テーマファイル（たとえば、footer.php）で好きな場所に次のコードを貼り付けます。クエリエシン
WordPressホスト用のWebサイトを構築する方法
Apr 20, 2025 am 11:12 AM
WordPressホストを使用してWebサイトを構築するには、次のようにする必要があります。信頼できるホスティングプロバイダーを選択します。ドメイン名を購入します。 WordPressホスティングアカウントを設定します。トピックを選択します。ページと記事を追加します。プラグインをインストールします。ウェブサイトをカスタマイズします。あなたのウェブサイトを公開します。
