JavaScript で矢印キーの押下を検出する方法: onkeypress が機能しない理由と onkeydown の解決策

JavaScript での矢印キーの押下を検出する: 総合ガイド

キーの押下を検出することは、Web 開発、特に対話型コントロールを作成する場合の一般的なタスクです。ほとんどのキーは onkeypress イベント リスナーを使用して正確に検出できますが、矢印キーには独特の課題が生じます。この記事では、onkeypress を使用して矢印キーを検出できない理由を検討し、JavaScript で矢印キーの押下をキャプチャする簡単な解決策を提供します。

矢印キーのジレンマ

onkeypress を使用してキーの押下を検出すると、機能しますほとんどのキーに完璧に対応します。ただし、矢印キー (左、上、右、下) は onkeypress イベントをトリガーしません。これは、ブラウザの矢印キーの処理方法が異なり、デフォルトでスクロール動作が開始されるためです。

解決策: onkeydown を使用する

矢印キーの押下を検出するには、onkeypress の代わりに onkeydown イベント リスナーを使用する必要があります。 onkeydown イベントは、矢印キーを含むキーが押されるたびに発生します。 onkeydown を使用したコード スニペットの更新バージョンは次のとおりです。

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode);
}

矢印キーのキーコード

特定の矢印キーを識別するには、対応するキーコードを使用できます:

• 左: 37
• 上: 38
• 右: 39
• 下: 40

event.keyCode をこれらの値と比較すると、どの矢印キーが押されたかを簡単に判断できます。

以上がJavaScript で矢印キーの押下を検出する方法: onkeypress が機能しない理由と onkeydown の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。