エミュレートGoogleキーボードショートカット

Question

私は（フォトギャラリーでは、現在のFacebook）Googleは、このようなJ/Kまたは←/→矢印でショートカットキーを実装する方法は本当に興味があります。私は、その部分がそれらのボタンを「チック」にするソースを調べることによって、理解することができないので、多くの細部を持っていないのではないかと思います。私が特に探しているのは、ボタンをJavascript関数にバインドする方法です。そこから、明らかにかなり簡単です。

Answer 1

最も基本的なのは、keydownイベントハンドラをページのグローバルにしたい場合はドキュメントオブジェクトに登録してから、イベントオブジェクトを見てどのキーが押されたかを確認するだけです。

さまざまなブラウザがさまざまな方法でイベントを処理するので（私はInternet Explorerを見ています）、私は一般的にYUIやjQueryなどの抽象化レイヤーを使用して違いを正規化します。

YUIはと同じようにexample of implementing keyboard controlです（ただし、この例はドキュメントオブジェクトには添付されません）。

どのキーコードがどのキーに関連しているか調べたい場合は、Firebugを使用するのが最も簡単です。

実行コンソールに次のコード：

document.onkeydown = function (ev) { console.log(ev); } 

＆hellip;そして、ページキーを押しキーをクリックしてください。コンソールに印刷されたオブジェクトは、あなたが解雇したキーコードを教えてくれます。

Answer 2

js-hotkeys（jQueryプラグイン）の使用をお勧めします。

プロダクション環境でこのプラグインを使用していたので、実装前にすべてのAグレードブラウザでテストしました。これは約3か月前です。