list - ULリストに注目

Question

私は自分のウェブサイトのカスタム検索を開発し、div 内の ul リストに結果を表示します。私の問題は、これらの結果をフォーカス可能にして、矢印キーで閲覧できるようにすることです。これは可能ですか？そして、それがどのように？ありがとう！

結果

Answer 1

この属性を使用しtabindexて、要素をフォーカス可能にすることができます。

jsフィドル

<ul>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
</ul>

矢印キーを有効にすることは、処理keydownと次のタブ インデックスへの移動の問題です。

JavaScript の開始

window.onkeydown = function(e) {
    e = e || event;
    switch (e.keyCode) {
        case 37: alert('left');
        case 38: alert('up'); 
            // http://stackoverflow.com/a/7208662/1156119
            break;
        case 39: alert('right'); 
        case 40: alert('down');
            // http://stackoverflow.com/a/7208662/1156119
            break;
    }
}