javascript - 如何使页面中的所有按钮都可以通过键盘访问

Question

我创建了一个仅包含按钮的基本网页，但我想让这些按钮只能通过键盘访问，以方便访问......请帮助。这是页面的代码

<table  border="0" align="center" cellpadding="5px" cellspacing="5px">
<tr>
  <td><button class="1" style="height:auto" onClick="#" onKeyDown="myFunction()">Milk Collection</button></td>
</tr>
<tr>
  <td><button class="1" onClick="#")> Local Sale</button></td>
</tr>
<tr>
  <td><button class="1" onClick="#")> Utilities</button></td>
</tr>
<tr>
  <td><button class="1" onClick="#")> Master</button></td>
</tr>

Answer 1

这可以帮助你

window.onkeydown = function(e) {
    var key = e.keyCode;
    if (key === 13) {
        //Enter key
    }
};

Answer 2

创建键盘快捷键的一种简单方法是使用此“快捷方式”插件

这是如何使用它的示例；

<script type="text/javascript" src="js/shortcut.js"></script>

<script>
    shortcut.add("alt+s", function() {
        // Do something
    });   
    shortcut.add("ctrl+enter", function() {
        // Do something
    }); 
</script>

如果您不想使用任何第三方插件（jquery 除外），您可以使用 max 提供的一个；目前 keypress 事件在谷歌浏览器和 Safari 中都不起作用，但如果你使用 keydown ，它们将适用于所有浏览器。

$(window).keydown(function(e) {
    var code = e.which || e.keyCode; //<--edit, some browsers will not give a keyCode
    switch (code) {
        case 37: case 38:  //key is left or up
            if (currImage <= 1) {break;} //if is the first one do nothing
            goToPrev(); // function which goes to previous image
            return false; //"return false" will avoid further events
        case 39: case 40: //key is left or down
            if (currImage >= maxImages) {break;} //if is the last one do nothing
            goToNext(); // function which goes to next image
            return false; //"return false" will avoid further events
    }
    return; //using "return" other attached events will execute
});

要找出keyCode您要使用的按键，您可以alert(e.keyCode);在上面的功能中，然后为您的按键序列添加案例。

Answer 3

html:

 <button class="1" style="height:auto"  onkeydown="myFunction(event)">Milk Collection</button>

Javascript：

 function myFunction(e) { // Trigger the click event from the keyboard
    if (e.keyCode == 13) {
        alert("click");
        return false;
    }
 }