この記事では、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 サイトの他の関連記事を参照してください。
ブログをwordpress.comからwordpress.orgに簡単に移動する方法Apr 18, 2025 am 11:33 AMブログをwordpress.comからwordpress.orgに移動しますか？ 多くの初心者はWordPress.comから始めますが、すぐに制限を実現し、自己ホストされたWordPress.orgプラットフォームに切り替えたいと考えています。 このステップバイステップガイドでは、WordPress.comからWordPress.orgにブログを適切に移動する方法を示します。 なぜwordpress.comからwordpress.orgに移行するのですか？ WordPress.comを使用すると、誰でもアカウントを作成できます
IFTTT（およびその他）でWordPressとソーシャルメディアを自動化する方法Apr 18, 2025 am 11:27 AMWordPress Webサイトやソーシャルメディアアカウントを自動化する方法をお探しですか？ 自動化を使用すると、WordPressのブログ投稿やFacebook、Twitter、LinkedIn、Instagramなどで自動的に共有できます。 この記事では、IFTTT、Zapier、およびUncanny Automatorを使用してWordPressとソーシャルメディアを簡単に自動化する方法を紹介します。 WordPressとソーシャルメディアを自動化する理由 WordPreを自動化します
WordPressでカスタムメニュー項目の制限を修正する方法Apr 18, 2025 am 11:18 AMほんの数日前、ユーザーの1人が異常な問題を報告しました。問題は、彼がカスタムメニュー項目の限界に達することです。メニュー項目の制限に到達した後に保存するコンテンツはまったく保存されません。この問題を聞いたことがないので、ローカルインストールで試してみることにしました。 200を超えるメニュー項目が作成され、保存されました。効果はとても良いです。 100個のアイテムをドロップダウンリストに移動し、それらを非常によく保存します。その後、サーバーに関係している必要があることがわかりました。さらなる研究の後、他の多くの人が同じ問題に遭遇したようです。深く掘り下げた後、この問題を強調したTRACチケット（＃14134）を見つけました。よく読んでください
WordPressのカスタム分類法にカスタムメタフィールドを追加する方法Apr 18, 2025 am 11:11 AMWordPressのカスタム分類法にカスタムメタフィールドを追加する必要がありますか？ カスタム分類法により、カテゴリとタグ以外にコンテンツを整理できます。他のフィールドを追加してそれらを説明するのが便利な場合があります。 この記事では、作成した分類法に他のメタフィールドを追加する方法を紹介します。 カスタムメタフィールドはいつカスタム分類法に追加する必要がありますか？ WordPressサイトで新しいコンテンツを作成すると、2つのデフォルトの分類法（カテゴリとタグ）を使用して整理できます。 一部のWebサイトは、カスタム分類法の使用から恩恵を受けます。これらを使用すると、コンテンツを他の方法で並べ替えることができます。 例えば、
Windowsライブライターを使用してWordPressにリモートで公開する方法Apr 18, 2025 am 11:02 AMWindows Live Writerは、デスクトップからWordPressブログに直接投稿することができる多用途のツールです。これは、ブログを更新するためにWordPress管理パネルにログインする必要がないことを意味します。このチュートリアルでは、Windows Live Writerを使用してWordPressブログのデスクトップ公開を有効にする方法を紹介します。 WordPressにWindows Live Writerをセットアップする方法 ステップ1：WordprでWindows Live Writerを使用するには
WordPress Visual Editorで白いテキストと欠落ボタンを修正する方法Apr 18, 2025 am 10:52 AM最近、ユーザーの1人が非常に奇妙なインストールの問題を報告しました。投稿を書くとき、彼らは彼らが書くものは何も見ることができません。ポストエディターのテキストは白だからです。さらに、すべてのVisual Editorボタンが欠落しており、VisualからHTMLに切り替える機能も機能しません。この記事では、WordPress Visual Editorで白いテキストと欠落したボタンの問題を修正する方法を示します。 初心者に注意：他のWebサイトのスクリーンショットで見られる隠されたボタンを探しているなら、キッチンシンクを探しているかもしれません。 Kitchen Sinkアイコンをクリックして、下線、Wordからのコピーなどの他のオプションを表示する必要があります。
WordPressのユーザーメールでアバターを表示する方法Apr 18, 2025 am 10:51 AMWordPressのユーザーメールでアバターを表示しますか？ Gravatarは、ユーザーのメールアドレスをオンラインアバターに接続するネットワークサービスです。 WordPressは、コメントセクションに訪問者のプロフィール写真を自動的に表示しますが、サイトの他の領域に追加することもできます。 この記事では、WordPressのユーザーメールでアバターを表示する方法を紹介します。 グラバタルとは何ですか、なぜそれを表示する必要がありますか？ Gravatarは、世界的に認識されているアバターの略で、画像をメールアドレスにリンクできるようになります。 ウェブサイトがサポートしている場合
WordPressのデフォルトのメディアアップロード場所を変更する方法Apr 18, 2025 am 10:47 AMWordPressのデフォルトのメディアアップロード場所を変更しますか？ メディアファイルを他のフォルダーに移動すると、Webサイトの速度とパフォーマンスが向上し、バックアップをより速く作成することができます。また、自分に最適な方法でファイルを整理する自由を提供します。 この記事では、WordPressのデフォルトのメディアアップロード場所を変更する方法を紹介します。 デフォルトのメディアアップロード場所を変更する理由 デフォルトでは、WordPressは/wp-content/uploads/folderにすべての画像およびその他のメディアファイルを保存します。 このフォルダーには、さまざまな年と数ヶ月の子供がいます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
メモ帳++7.3.1
使いやすく無料のコードエディター
