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

妍小妍

发布于 2022-08-01 14:36:18

2.4K0

发布于 2022-08-01 14:36:18

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

问题与实现

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>
<!-- 省略 -->

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-06-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery