防止在输入键时提交表单

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

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

当前回答

整个文档按下回车键:

$(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

其他回答

在我看来，一个更简单有效的方法应该是:

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}

2015-06-07 11:07:37

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

因此，覆盖尽可能多的浏览器的最佳解决方案可能是

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

2019-01-22 11:21:41

跨浏览器解决方案

一些旧的浏览器以非标准的方式实现keydown事件。

KeyBoardEvent。Key是在现代浏览器中应该实现的方式。

哪一个和keyCode现在已经被弃用了，但检查这些事件并没有什么害处，这样代码就可以为仍然使用IE等旧浏览器的用户工作。

isKeyPressed函数检查按下的键是否为enter, event.preventDefault()会阻止表单提交。

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

最小工作示例

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

2019-03-07 17:43:42

下面是如何使用JavaScript来完成它:

//in your **popup.js** file just use this function var input = document.getElementById("textSearch"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { alert("yes it works,I'm happy "); } });  <!DOCTYPE html> <html> <body style="width: 500px"> <input placeholder="Enter the text and press enter" type="text" id="textSearch"/> <script type="text/javascript" src="public/js/popup.js"></script> </body> </html>

2018-06-16 23:04:39

防止在输入键时提交表单

推荐文章

最新文章

标签