防止在输入键时提交表单

我有一个带有两个文本框的表单，一个选择下拉框和一个单选按钮。当按下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

其他回答

<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

在HTML页面中添加此代码…它会使……输入按钮. .

2019-11-08 06:16:41

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

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

下面是如何使用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

原生js(获取api)

2017-06-10 12:16:10

跨浏览器解决方案

一些旧的浏览器以非标准的方式实现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

防止在输入键时提交表单

推荐文章

最新文章

标签