页面上回车触发button按钮click事件back

发布于 2020-06-25  1.21k 次阅读  共 679 字


与百度等等各大搜索引擎,输入框输入完问题直接回车即可搜索功能相同!

问题与实现

button按钮在获得焦点(foucs)的情况下,敲击键盘enter键也会触发button按钮的click事件,一般情况下不会有什么影响。但如果用户鼠标点击按钮后,在表单提交或者某些请求过程中,用户不停点击回车键,就会重复发起提交或者请求,如果未处理,很容易就出现错误。若涉及交易请求一类,这个问题会更加严重。

方法一:

<!-- 省略 -->
<body>
  <button id="btn">按钮</button>
</body>
<!-- 省略 -->
<script type="text/javascript">
document.getElementById("btn").onclick = function(e) { //此处填写button的ID
  console.log('click')
  console.log(e)
}
</script>
<!-- 省略 -->

方法二(需要jquery的支持):

<!-- 省略 -->
<body>
  <button id="but1">按钮</button>
</body>
<!-- 省略 -->
<script type="text/javascript">
        document.onkeydown = function (e) {
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which;
            if (code == 13) {
                $("#but1").click(); //此处填写#+button的ID
            }
        }
</script>
<!-- 省略 -->