jQueryキャプチャシングルキープレスイベント（キーボードショートカット）

jQuery（キーボードショートカット）

を使用してシングルキーイベントをキャッチします

Webサイトのパフォーマンスとユーザーエクスペリエンスを改善するには、一般的なWebサイトタスクをより速く実行するために、キーボードショートカットを追加する必要がある場合があります。この記事では、jQueryを使用してキーボードイベントを作成する方法を簡単で理解しやすい言語で説明します。プレスされたキーボードキーのキーコードを見つけます。

以下は実装方法です：

//这是一个通用的设置，用于在jQuery中捕获keyup事件，并将结果记录到firebug控制台

if(typeof console == 'undefined'){
    console = {};
    console.log = function(arg){return false;};
}

$(document).keyup(function(e){
    //找出按下了哪个键
    switch(e.keyCode){
        case 65 :   console.log('a');   break;  // a
        case 66 :   console.log('b');   break;  // b
        case 67 :   console.log('c');   break;  // c
        case 68 :   console.log('d');   break;  // d
        case 69 :   console.log('e');   break;  // e
        case 70 :   console.log('f');   break;  // f
        case 71 :   console.log('g');   break;  // g
        case 72 :   console.log('h');   break;  // h
        case 73 :   console.log('i');   break;  // i
        case 74 :   console.log('j');   break;  // j
        case 75 :   console.log('k');   break;  // k
        case 76 :   console.log('l');   break;  // l
        case 77 :   console.log('m');   break;  // m
        case 78 :   console.log('n');   break;  // n
        case 79 :   console.log('o');   break;  // o
        case 80 :   console.log('p');   break;  // p
        case 81 :   console.log('q');   break;  // q
        case 82 :   console.log('r');   break;  // r
        case 83 :   console.log('s');   break;  // s
        case 84 :   console.log('t');   break;  // t
        case 85 :   console.log('u');   break;  // u
        case 86 :   console.log('v');   break;  // v
        case 87 :   console.log('w');   break;  // w
        case 88 :   console.log('x');   break;  // x
        case 89 :   console.log('y');   break;  // y
        case 90 :   console.log('z');   break;  // z
    }
});

単一のキーイベントのキャプチャに関するよくある質問

jqueryを使用して単一のキープレスをキャプチャする方法は？

jQueryを使用して単一のキーをキャプチャするには、keypress()メソッドを使用できます。このメソッドは、keypressイベントをトリガーするか、keypressイベントが発生したときに実行される関数を添付します。簡単な例を次に示します：

$(document).keypress(function(event){
  alert('按下的键：' + String.fromCharCode(event.which));
});

keydown、keypress、keyupイベントの違いは何ですか？

keydown、keypress、およびkeyupイベントはすべてキーボードの相互作用に関連していますが、さまざまな時期にトリガーされます。キーが押されたときにkeydownイベントがトリガーされます。文字値を生成するキーが押されたときに、keypressイベントがトリガーされます。キーがリリースされると、keyupイベントが発生します。

キープレスイベントのデフォルト操作をブロックする方法は？

イベントハンドラー関数のキープレスイベントのデフォルト操作をブロックするには、

メソッドを使用できます。たとえば、Enterキーが押されたときにフォームが送信されるのを防ぎたい場合は、次のことを行うことができます。 event.preventDefault()

どのキーが押されているかを検出する方法は？

$('form').keypress(function(event){
  if(event.which == 13){
    event.preventDefault();
    alert('阻止表单提交！');
  }
});

イベントハンドラー関数の

属性を使用して、どのキーが押されているかを検出できます。このプロパティは、

イベントをトリガーするキーのUnicode値を返します。たとえば、event.which keypress

$(document).keypress(function(event){
  alert('按下的键：' + String.fromCharCode(event.which));
});

イベントを使用して、非文字キーを検出できますか？

keypressいいえ、

イベントは、文字値を生成するキーが押されている場合にのみトリガーされます。これは、文字などを生成しないキーをトリガーしないことを意味します。非文字キーを検出する必要がある場合は、代わりに

またはkeypressイベントを使用してください。 keydown keyup（後続の質問への回答は、複製を避けるためにここで省略した元のテキストと同じです。）

以上がjQueryキャプチャシングルキープレスイベント（キーボードショートカット）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。