JavaScript で Caps Lock を検出する方法: シンプルで効率的なアプローチ?

JavaScript を使用した Caps Lock の検出: シンプルで効率的なアプローチ

JavaScript を使用して Caps Lock がアクティブ化されているかどうかを判断することは、開発者間で共通の課題となっています。さまざまな回避策が存在しますが、多くの場合、複雑でリソースを大量に消費する方法が必要になります。幸いなことに、複雑なループやイベント ハンドラーの必要性を排除する簡単な解決策があります。

KeyboardEvent と getModifierState の使用

最新のブラウザには、getModifierState を提供する KeyboardEvent オブジェクトが用意されています。関数。この関数は、Caps Lock を含む特定の修飾キーのステータスを返します。これを活用する方法は次のとおりです。

<code class="javascript">passwordField.addEventListener('keydown', function(event) {
  var caps = event.getModifierState && event.getModifierState('CapsLock');
  console.log(caps); // true when Caps Lock is on
});</code>

この例では、入力フィールドに keydown イベント リスナーをアタッチします。キーが押されると、イベント オブジェクトがキャプチャされ、getModifierState 関数を使用して Caps Lock の状態が確認されます。 Caps Lock がアクティブな場合は、「true」を返します。このアプローチは、面倒な回避策を必要とせずに組み込みのブラウザ機能に依存するため、直感的でありリソース効率も優れています。

以上がJavaScript で Caps Lock を検出する方法: シンプルで効率的なアプローチ?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。