防止在输入键时提交表单

我有一个带有两个文本框的表单，一个选择下拉框和一个单选按钮。当按下enter键时，我想调用JavaScript函数，但当我按下它时，表单就提交了。

当按下回车键时，如何防止表单被提交?

当前回答

下面的代码将在整个页面上添加ENTER键监听器。

这在带有单个操作按钮的屏幕中非常有用，例如登录，注册，提交等。

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

已在所有浏览器上测试。

2016-12-14 07:40:15

其他回答

整个文档按下回车键:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

2015-06-16 05:58:33

事件。键=== "Enter"

使用event.key。不再有任意的数字代码!

注意:旧属性(。keyCode和.which)已弃用。

const node = document.getElementsByClassName("mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

现代风格，有lambda和解构

node.addEventListener("keydown", ({key}) => {
    if (key === "Enter") // Handle press
})

Mozilla文档

支持的浏览器

2017-09-14 04:25:36

下面的代码将在整个页面上添加ENTER键监听器。

这在带有单个操作按钮的屏幕中非常有用，例如登录，注册，提交等。

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

已在所有浏览器上测试。

2016-12-14 07:40:15

在用户定义的函数中使用event.preventDefault()

<form onsubmit="userFunction(event)"> ...

函数userFunction (ev) ｛如果(! event.target.send.checked) ｛ console.log('form NOT submit on "Enter" key') ev.preventDefault (); ｝｝打开chrome控制台>网络选项卡查看 <form onsubmit="userFunction(event)" action="/test.txt"> . <input placeholder="type and press Enter" /><br> . <input type="checkbox" name="send" /> submit on enter > < /形式

2020-07-27 18:43:02

react js解决方案

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>

2016-01-08 07:15:38

防止在输入键时提交表单

推荐文章

最新文章

标签