HTML

我们举两个例子，第一个按键 "a"到智慧小屋首页。还有个按上下键。

<p>1、按下键盘中的a键，跳转到sucaihuo.com首页。</p> 
  <a id="link" href="https://jy.tp.yuanmeng.life/">sucaihuo.com首页</a> 
  <br />
  <br /> 
  <p>2、使用键盘方向键↑ & ↓ 或直接按下键盘中的数字看看。</p> 
  <ul id="ul_keys"> 
   <li class="selected"><a href="#">Item 1</a> (1)</li> 
   <li><a href="#">Item 2</a> (2)</li> 
   <li><a href="#">Item 3</a> (3)</li> 
   <li><a href="#">Item 4</a> (4)</li> 
   <li><a href="#">Item 5</a> (5)</li> 
   <li><a href="#">Item 6</a> (6)</li> 
   <li><a href="#">Item 7</a> (7)</li> 
</ul>

接着引用jQuery库和监盘插件：

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.mapkey.min.js"></script>

jQuery

然后我们调用mapkey插件，示例中的js如下：

var cur = 0;
$(function() {
    $("a#link").mapKey("a");
    $.mapKey("down", nextItem, {
        direction: "down"
    });
    $.mapKey("up", prevItem, {
        direction: "down"
    });
    $.mapKey("1",
    function() {
        setItem(1);
    });
    $.mapKey("2",
    function() {
        setItem(2);
    });
    $.mapKey("3",
    function() {
        setItem(3);
    });
    $.mapKey("4",
    function() {
        setItem(4);
    });
    $.mapKey("5",
    function() {
        setItem(5);
    });
    $.mapKey("6",
    function() {
        setItem(6);
    });
    $.mapKey("7",
    function() {
        setItem(7);
    });
});
function nextItem() {
    if (cur < ($("li").length - 1)) {
        cur++;
    } else {
        cur = 0;
    }
    updateItems();
}
function prevItem() {
    if (cur > 0) {
        cur--;
    } else {
        cur = $("li").length - 1;
    }
    updateItems();
}
function updateItems() {
    $("#ul_keys li.selected").removeClass("selected");
    $("#ul_keys li:eq(" + cur + ")").addClass("selected");
}
function setItem(num) {
    cur = num - 1;
    updateItems();
}