Webサイトにキーボードショートカットを追加する方法
キーボードショートカットが好きですか？彼らはあなたが多くの時間を節約するのを手伝うことができますね。あなたの訪問者の利益のために、あなた自身のウェブサイトにキーボードショートカットを追加しますか？それはあなたのサイトのアクセシビリティとナビゲーションを大いに改善するでしょう.
この記事では、MousetrapというJavaScriptライブラリを使用してWebページにショートカットを追加する方法について簡単に説明します。ネズミ捕りであなたができる キーを指定 Shift、Ctrl、Alt、Options、Commandのように あなたのウェブサイトで特定の機能を実行する. また、古いブラウザでもうまく機能します。.
Hongkiatの詳細：
- Hint.Cssで簡単にアニメーションツールチップを作成する
- Intro.Jsを使用したステップバイステップガイドの作成[チュートリアル]
- HTML5の範囲スライダをスタイルする方法
- cookie＆HTML5 localstorageの使い方
入門
コンテンツと共に新しいHTMLドキュメントを作成し、そしてMousetrapライブラリをリンクすることから始めます。ライブラリがCloudFlareネットワークを通じて提供されるように、CDNjsでホストされているネズミ捕りライブラリを使用します。
今度はネズミ捕りを使用します 'バインド' キーボードキーを機能付きで付ける方法。あなたが割り当てることができます 単一キー、キーの組み合わせ、またはシーケンスキー, 例えば
シングルキー
この例では、sを束縛します。.
Mousetrap.bind（ 's'、function（e）//ここにあなたの関数…）;
組み合わせキー
この例では、Ctrlとsをバインドしています。指定した機能を実行するには、2つのキーを同時に押す必要があります.
Mousetrap.bind（ 'ctrl + s'、機能（e）//ここにあなたの機能…）;
シーケンスキー
この例では、ユーザーはgを押してから、 の その後。あなたがWebベースのゲームを開発しているなら、これは秘密の隠されたキーコンボを追加するために役に立つかもしれません.
Mousetrap.bind（ 'g s'、function（e）//ここにあなたの関数…）;
ネズミ捕りの使い方
ユーザーがWebサイトの一部の機能にアクセスできるようにするためのキーボードショートカットをいくつか使用した簡単なWebページを作成します。 HTMLドキュメントの操作とHTML要素の選択を簡単にするためにjQueryを使用します。.
簡単なことから始めましょう.
ユーザーが検索入力フィールドに素早く集中できるようにするためのキーをバインドします。.
1.以下は、検索用のHTMLマークアップです。 id.
2.次に、検索入力に焦点を当てる関数を作成します.
function search（）var search = $（ '＃search'）; search.val（ "）; search.focus（）;
3.最後に、関数を実行するためのキーをバインドします.
Mousetrap.bind（ '/'、検索）;
それはね。 /ボタンを押して検索入力に移動できるようになります。.
あるいは、キーの組み合わせであるCtrl / Cmd + Fをバインドすることもできます。これは、多くのデスクトップアプリケーションで検索に使用される一般的なキーショートカットです。
Mousetrap.bind（['command + f'、 'ctrl + f']、検索）;
ブートストラップでネズミ捕りを使う
ネズミ捕りをBootstrapなどのフレームワークと統合するのは簡単です。この2番目の例では、Webサイトで利用可能なショートカットのリストを表示するヘルプウィンドウを表示します。ここでは、リストを提示するためにBootstrap Modalを選び、モーダルを表示するためのキー.
ですが？ Shiftキーでのみアクセスできます。キーで十分.
Mousetrap.bind（ '？'、function（）$（ '＃help'）。modal（ 'show'）;）;
今あなたがヒットしたとき？キーを押すと、ポップアップが表示されます.
効率的なバインディングのためのヒント
時間が経つにつれて、キーボードショートカットのあなたの成長するコレクションはあなたのコードをめちゃくちゃにし始めるかもしれません。これが起こるなら、あなたがあなたのものを作るためにあなたが加えることができる拡張子があります “キー割り当て” より効率的なコード。それは “バインド辞書”. この拡張機能をプライマリのMousetrapライブラリの後に追加します。, mousetrap.min.js.
さて、各キー割り当てを分離する代わりに、それらを1つのグループにきちんとグループ化することができます。 .バインド（） メソッド、そう：
Mousetrap.bind（'/'：検索、 't'：ツイート、 '？'：function modal（）$（ '＃help'）。modal（ 'show'）;、 'j'：function next（ ）highLight（ 'j'）、 'k'：関数prev（）highLight（ 'k'））;
より高度な実装のために、あなたは私が作ったデモを見ることができます。デモでは、JキーまたはKキーを押して投稿を強調表示し、Tキーを押して強調表示した現在の投稿をツイートすることができます。.
- デモを見る
- ダウンロード
