【问题标题】：Prevent form submission on Enter key press防止按 Enter 键提交表单
【发布时间】：2010-10-28 15:50:40
【问题描述】：

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

如何防止按下enter键时form被提交？

【问题讨论】：

标签： javascript forms keypress dom-events enter

【解决方案1】：

我使用了文档，它涵盖了页面加载后动态添加的html：

  $(document).on('keydown', '.selector', function (event) {
    if (event.which == 13 || event.keyCode == 13) {
      //do your thang
    }
  });

添加来自@Bradley4 的更新

【讨论】：

【解决方案2】：

event.key === "回车"

更新更简洁：使用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 Docs

Supported Browsers

【讨论】：

这不只是一个宏或别名吗？使用此代码在性能方面有什么好处吗？
keyCode 已弃用。这比代码中的魔术整数更具可读性和可维护性
对于那些想知道如何找到不同键的key值的人，您可以使用keyjs.dev
2021年，我相信这是正确的答案。
可读，是的！清洁器？ 13 比Enter 更干净。没有诸如“输入”或“输入”之类的问题。如果你能记住“回车”，你就能永远记住13。它占用的空间更少。

【解决方案3】：

以下是使用 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 ");
        }
    });

<!--Let's say this is your html file-->
 <!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>

【讨论】：

【解决方案4】：

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

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

function userFunction(ev) 
{
    if(!event.target.send.checked) 
    {
        console.log('form NOT submit on "Enter" key')

        ev.preventDefault();
    }
}

Open chrome console> network tab to see
<form onsubmit="userFunction(event)" action="/test.txt">
  <input placeholder="type and press Enter" /><br>
  <input type="checkbox" name="send" /> submit on enter
</form>

【讨论】：

【解决方案5】：

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

在您的 HTML 页面中添加此代码...它将禁用 ...Enter Button..

【讨论】：

【解决方案6】：

跨浏览器解决方案

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

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

which 和 keyCode 现在已被弃用，但检查这些事件并没有什么坏处，因此代码适用于仍然使用 IE 等旧版浏览器的用户。

isKeyPressed 函数检查是否输入了按下的键，event.preventDefault() 阻止表单提交。

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

最小的工作示例

JS

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/

【讨论】：

【解决方案7】：

因此，覆盖尽可能多的浏览器并成为未来证明的最佳解决方案可能是

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

【讨论】：

【解决方案8】：

有点简单

不要在按键“Enter”时发送表单：

<form id="form_cdb" onsubmit="return false">

在按键“Enter”时执行功能：

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

【讨论】：

【解决方案9】：

原生js（获取api）

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();

&lt;input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text"&gt;

【讨论】：

这里为什么要包含client_id等？代码合法吗？

【解决方案10】：

if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

好的，假设您在表单中有以下文本框：

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

为了在按下回车键时从该文本框中运行一些“用户定义”脚本，而不是让它提交表单，这里有一些示例代码。请注意，此功能不会进行任何错误检查，并且很可能仅适用于 IE。要做到这一点，您需要一个更强大的解决方案，但您会得到大致的想法。

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

返回函数的值将提醒事件处理程序不要再冒泡事件，并将阻止按键事件被进一步处理。

注意：

有人指出keyCode 是now deprecated。下一个最佳替代品which 是also been deprecated。

不幸的是，现代浏览器广泛支持的受欢迎的标准key 有一些dodgy behavior in IE and Edge。任何早于 IE11 的东西仍然需要 polyfill。

此外，虽然已弃用的警告对于 keyCode 和 which 来说是相当不祥的，但删除这些警告将代表对无数旧网站的巨大破坏性变化。出于这个原因，他们不太可能很快去任何地方。

【讨论】：

这种情况可以使用PreventDefualt吗？
是的，而不是返回false。
您可以构建一个有效函数数组，而不是 eval，然后使用 .indexOf() 检查用户的输入是否在该数组中，如果是则调用该函数。减少错误/用户搞砸的范围。
keyCode is now deprecated
虽然我同意您关于 keyCode 和 which 已弃用的说明，但我认为开发人员应该通过不支持此类旧版浏览器来帮助实现这一过渡，尤其是现在 IE 已正式死亡而 Edge 已采用铬。无论如何，检查不同标识符键的好工具是keyjs.dev

【解决方案11】：

使用 TypeScript，避免函数多次调用

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}

【讨论】：

这个问题已经有八年多了。那时打字稿还不存在。所以你确定你没有回答其他问题吗？

【解决方案12】：

<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>

【讨论】：

【解决方案13】：

下面的代码将在整个页面上为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>

在所有浏览器上测试。

【讨论】：

【解决方案14】：

一个 react js 解决方案

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


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

【讨论】：

【解决方案15】：

如果您使用的是 jQuery：

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});

【讨论】：

keyup 在提交后触发，因此无法取消。

【解决方案16】：

检测整个文档上按下的 Enter 键：

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

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

【讨论】：

【解决方案17】：

从我的角度来看，一个更简单有效的方法应该是：

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

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

【讨论】：

【解决方案18】：

一个 jQuery 解决方案。

我来这里是为了寻找一种方法来延迟表单提交，直到文本输入上的模糊事件被触发之后。

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

如果能获得一个更通用的版本来触发所有延迟事件而不仅仅是表单提交，那就太好了。

【讨论】：

【解决方案19】：

同时使用event.which 和event.keyCode：

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

【讨论】：

为什么要同时使用 event.which 和 event.keyCode？span>
部分浏览器支持which，其他浏览器支持keyCode。最好同时包含两者。
也使用keydown 事件而不是keyup 或keypress
@Agiagnoc 但这应该附加到什么事件？
@manish，keypress 为您提供了比 keydown/up 更多的信息。 stackoverflow.com/a/9905293/322537

【解决方案20】：

将表单的onsubmit 操作覆盖为对您的函数的调用，并在其后添加return false，即：

<form onsubmit="javascript:myfunc();return false;" >

【讨论】：

我无法覆盖 onsubmit，因为我在此页面中有另一个表单提交
是的，你可以。 Javascript 是基于原型的语言。 document.forms["form_name"].onsubmit = fucntion() {}
我在提交表单时还有另一个删除程序要运行。所以我想保持原样
@Shyju 如果你想同时运行：表单标签中定义的动作以及按下提交按钮时触发的javascript，你可以删除代码return false;，那么这两个动作都将是触发。