自身のホームページやWebサイトに独自のキーバインドを設定する方法

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> <a id="first" href="#" class='move'>Link</a> </li>
<li><a href="#" class="move">Link</a></li>
<li><a href="#" class="move">Link</a></li>
<li><a href="#" class="move">Link</a></li>
</ul>

これで、jやkでコンテンツのフォーカスを移動できるようになります。