Webサイトに任意のユーザー用のショートカットキーを設定できるスクリプト・「visualKeys」

visualKeys

See the Pen PPxEdN by kachibito (@kachibito) on CodePen.

visualKeysはWebサイトに任意のショートカットキーを手軽に割り当てられるスクリプトです。jQueryに依存しています。上記のように、設定したショートカットキーの一覧と、そのアクションを設定することが出来ます。設定は

$.visualkeys({
  '66' : {
    text : '<i>b</i> <b>背景を赤にします</b>',
    exec : function(){$('body').css('background','red');}
  },
  '71' : {
    text : '<i>g</i><b>Googleへ移動します</b>',
    exec : function(){ location.href='http://www.google.co.jp/';}
  }
});

といった感じでキーコードと、そのコードが使われた際のアクションを書くだけ。どこかで使うかも、と思ったので備忘録として。ライセンスはMITです。

visualKeys