GoogleやHatenaのサイトでは、実はviのキーバインドが有効になっています。つまり、jやkでコンテンツを選択できるようになっています。
今回は、このような機能を自身のホームページやWebサイトで設定してみようということで、この記事を書きます。
使用するのは、jeresig/jquery.hotkeysです。使い方は、以下の様なコードを書けばOKです。
js/hotkeys-vi.js
$(function(){$(document).bind('keydown','j',function(){$(".move:focus").closest('li').next().find('a.move').focus();})});$(function(){$(document).bind('keydown','k',function(){$(".move:focus").closest('li').prev().find('a.move').focus();})});$(function(){$(document).bind('keydown','g',function(){document.location.href='#';})});$(function(){$(document).bind('keydown','Shift+g',function(){document.location.href='#footer';})});$('.move').click(function(){this.focus();});$(function(){$('#first').focus();});head.html
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript"src="https://raw.githubusercontent.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script><script type="text/javascript"src="js/hotkeys-vi.js"></script>index.html
<ul><li><aid="first"href="#"class='move'>Link</a></li><li><ahref="#"class="move">Link</a></li><li><ahref="#"class="move">Link</a></li><li><ahref="#"class="move">Link</a></li></ul>これで、jやkでコンテンツのフォーカスを移動できるようになります。