ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用してブラウザ間で押された文字キーを確認する方法

JavaScript を使用してブラウザ間で押された文字キーを確認する方法

Barbara Streisand
Barbara Streisandオリジナル
2024-10-28 16:25:02980ブラウズ

How to Determine the Character Key Pressed Across Browsers with JavaScript?

Javascript を使用したクロスブラウザーで押された文字キーの判別

最新の Web 開発では、異なるブラウザー間で一貫してキーボード入力イベントを処理することが不可欠です。 。一般的な要件は、ユーザーのキーストロークに関連付けられた文字キーを識別することです。以下は、純粋な Javascript を使用してこれを実現するクロスブラウザーのソリューションです。

アプローチ:

押された文字キーを識別する鍵は、ブラウザーのイベント処理にあります。ブラウザごとに重要なイベントの処理方法が若干異なる場合があるため、互換性のあるアプローチが必要です。

実装:

次の Javascript スニペットは、ブラウザ間での実装を提供します。

<code class="js">function myKeyPress(e) {
  var keynum;

  if (window.event) { // IE
    keynum = e.keyCode;
  } else if (e.which) { // Netscape/Firefox/Opera
    keynum = e.which;
  }

  alert(String.fromCharCode(keynum));
}</code>

説明:

  • myKeyPress 関数は、キー押下イベントを処理するように設計されています。
  • window.event かどうかを検出することで、ブラウザーの互換性をチェックします。 e.利用可能です。
  • keynum 変数には、押されたキーに関連付けられた数値コードが格納されます。
  • 最後に、String.fromCharCode(keynum) は、数値コードを対応する文字に変換します。

使用法:

このイベント ハンドラーを利用して、押された文字をアラート ウィンドウに表示するには、次のように、入力フィールドに onkeypress イベント リスナーを追加できます。以下:

<code class="html"><input type="text" onkeypress="return myKeyPress(event)" /></code>

このブラウザー間互換性のあるソリューションを実装することにより、ユーザーのブラウザーの選択に関係なく、JavaScript のキーストロークに関連付けられた文字を効果的に取得できます。

以上がJavaScript を使用してブラウザ間で押された文字キーを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。