JavaScript: キーボードイベントをキャプチャしてそれに反応する-＆＃＆プレス-php.cn

JavaScript: キーボードイベントをキャプチャしてそれに反応する

PHPz

リリース： 2023-09-04 20:57:02

オリジナル

796 人が閲覧しました

JavaScript: キーボードイベントをキャプチャしてそれに反応する

この記事では、JavaScript でさまざまなキーボードイベントをキャッチして応答する方法について説明します。理解しやすいように実際の例をいくつか示します。

JavaScript はインターネットの中核テクノロジーの 1 つです。これはほとんどの Web サイトで使用されており、プラグインを必要とせずにすべての最新の Web ブラウザーでサポートされています。このシリーズでは、日々の JavaScript 開発に役立つさまざまなヒントやコツについて説明します。

JavaScript 開発者は、キーボードイベントを処理し、それに基づいてアクションを実行する必要がある機能を実装する必要がある場合があります。幸いなことに、JavaScript には、さまざまな種類のキーボードイベントを処理できる組み込みの KeyboardEvent オブジェクトが用意されています。

JavaScript のキーボードイベント

JavaScript では、KeyboardEvent オブジェクトは、キーダウン、キーダウン、およびキーアップの 3 つのイベントを提供します。

キーボードの任意のキーを押すと、一連のイベントが次の順序で発生します。

キーを押してください

主要なイベントは非推奨となり、最新のブラウザーでは段階的に廃止される予定です。

最後に、キーが放されたときにキーイベントが発生します。基本的に、キープレスイベントとキーダウンイベントの組み合わせにより、どのキーが押されたかを示すコードが得られます。

各キーボードイベントは、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 オブジェクトの keyCode プロパティは、押されたキーの Unicode 文字コードを返します。同様に、KeyboardEvent オブジェクトの shiftKey プロパティを使用することもできます。これにより、keypress イベント中に Shift キーが押されたかどうかがわかります。引き金。最後に、HTML フォームの入力フィールドに文字のみを許可する方法を示す次の例を見てみましょう。 リーリー 上記の例では、入力テキストボックスに keydown イベントを定義しました。したがって、ユーザーがテキストボックスにテキストを入力すると、

allowOnlyAlphabets

関数が呼び出されます。

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。我们还将在本节中讨论一些其他重要属性。

key：返回按下的字符。例如，如果按下a字符，则会返回 a。
code：返回字符的物理键码。例如，如果按下a字符，则会返回 KeyA。
keyCode：返回按下的按键的Unicode字符代码。
ctrlKey：告诉您触发按键事件时是否按下Ctrl键。
altKey：告诉您触发按键事件时是否按下了Alt键。
shiftKey：告诉您触发按键事件时是否按下Shift键。
metaKey：告诉你触发按键事件时是否按下了Meta键。在大多数情况下，Meta 键是键盘上位于 Ctrl 和 Alt 键之间的键。
位置：返回键盘或设备上按键的位置。