Question

我设计了一个单页网站，其中不同的div一个在另一个之下。如何为其分配键盘功能？因此，如果我按“Enter”，页面应采取“下一步”按钮的操作并显示下面创建的div。同样，当我按下“Backspace”时，页面应该执行“Previous”按钮的操作并显示上面创建的div。请帮忙。

Answer 1

你可以使用jQuery。

    $(document).keypress(function (e){ 
    if(e.keyCode == 13) // Enter key
    {
        // your action here, for example
        $('#buttonNext').click();
    }
    else if(e.keyCode == 8)    // BackSpace
    { 
        // your action here, for example
        $('#buttonPrev').click();
    }
});

Answer 2

以下是您正在寻找的示例。 请注意：我没有实现退格的使用;使用退格键是危险的，因为它可以通过将用户发送到最后一页来产生意外结果。相反，请使用向左和向右箭头键或输入以切换。

$(function() {
  $("#two").hide();

  $("body").keyup(function(event) {
    if (event.keyCode === 39 || event.keyCode === 13) { //Right Key or Enter
      $("#one").hide();
      $("#two").show();
    } else if (event.keyCode === 37) { //Left Key
      $("#one").show();
      $("#two").hide();
    }
  });
});

.blue,
.red {
  color: white;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="blue" id="one">
    This is the first example
  </div>
  <div class="red" id="two">
    And this is the second
  </div>
</body>

example.html的

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(function() {
                $("#two").hide();

                $("body").keyup(function(event) {
                    if (event.keyCode === 39 || event.keyCode === 13) {
                        $("#one").hide();
                        $("#two").show();
                    } else if (event.keyCode === 37) {
                        $("#one").show();
                        $("#two").hide();
                    }
                });
            });
        </script>
        <style>
            .blue, .red {
                color: white;
            }

            .blue {
                background-color: blue;
            }

            .red {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="blue" id="one">
            This is the first example
        </div>
        <div class="red" id="two">
            And this is the second
        </div>
    </body>
</html>

插入键盘功能

2 个答案: