Webページにキーボードのショートカットキーを割り当てられるjsライブラリ「Mousetrap」



デスクトップ アプリなどではキーボードによるショートカットキーは当たり前ですが、
Web上でもショートカットキーの機能を実装出来る、javascriptライブラリがあります。

Mousetrap
 

Mousetrap capture


このライブラリ、ショートカットキーでコールバックを割り当てられます。

* "Ctrl + q" の機能

// ctrl + qを押された時の処理
Mousetrap.bind('ctrl+q', function(e) {
    // callback
    console.log('hello shortcut!!')
});


macなどに使われている"Command"キーも同時に割り当てることが可能

// ctrl + q OR command + qが押された時の処理
Mousetrap.bind(['command+q', 'ctrl + q'], function(e) {
    // callback
    console.log('hello shortcut!!')
});


* 割り当てられるキーの一覧

shift, ctrl, alt, ( option, command )

backspace, tab, enter, return, capslock, esc, escape,
space, pageup, pagedown, end, home, left, up, right, down,
ins, del, plus


Mousetrapのデモページ

( *キーボードショートカットが前提なのでPCで開いて下さい )


ブログやニュース系等のシンプルなサイトでは使いドコロが難しいですが、
管理システムやwebアプリ等の多機能なWebシステムでは色々なシーンで利用出来そうですね。
( 例 : ctrl + shift + aで特定機能の呼び出しなど )

また、他のJSフレームワーク用のラッパーやtypescriptの定義ファイルも公開されています。

  1. angular-mousetrap
  2. ember-mousetrap
  3. typescript definition


管理システム等で、操作をもっと早くしたい人にはオススメ出来るライブラリーなので、
ぜひ×2 一度試してみてしてください。

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ