按 Enter 阻止用户提交表单
我在网站上进行了一项调查，用户按 Enter 键（我不知道为什么）并在未单击提交按钮的情况下意外提交了调查（表单）似乎存在一些问题。有没有办法防止这种情况？
我在调查中使用 HTML、PHP 5.2.9 和 jQuery。
您可以使用诸如
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
在阅读原始帖子的评论时，为了使其更实用并允许人们在完成所有字段后按 Enter：
function validationFunction() {
$('input').each(function() {
...
}
if(good) {
return true;
}
return false;
}
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});
禁止在任何地方输入键
如果您的表单中没有 <textarea>，则只需将以下内容添加到您的 <form>：
<form ... onkeydown="return event.key != 'Enter';">
或者使用 jQuery：
$(document).on("keydown", "form", function(event) {
return event.key != "Enter";
});
这将导致在 key 上检查表单内的每个按键。如果不是 Enter，那么它将返回 true，一切照常进行。如果是 Enter，那么它将返回 false，并且任何事情都会立即停止，因此不会提交表单。
keydown 事件优于 keyup，因为 keyup 来不及阻止表单提交。历史上也有 keypress，但已弃用，KeyboardEvent.keyCode 也是如此。您应该使用 KeyboardEvent.key 代替它返回被按下的键的名称。选中 Enter 时，将检查 13（正常输入）和 108（小键盘输入）。
请注意，其他一些答案中建议的 $(window) 而不是 $(document) 不适用于 IE<=8 中的 keydown/keyup，因此如果您想覆盖那些可怜的用户，这不是一个好的选择也是。
仅允许在 textareas 上输入键
如果您的表单中有 <textarea>（当然应该接受 Enter 键），则将 keydown 处理程序添加到不是 <textarea> 的每个单独的输入元素。
<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
为了减少样板，最好使用 jQuery 来完成：
$(document).on("keydown", ":input:not(textarea)", function(event) {
return event.key != "Enter";
});
如果您在这些输入元素上附加了其他事件处理函数，并且出于某种原因您还想在输入键上调用它们，那么只阻止事件的默认行为而不是返回 false，因此它可以正确传播到其他处理程序。
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
只允许在 textareas 上输入键和提交按钮
如果您也想在提交按钮 <input|button type="submit"> 上允许输入键，那么您可以随时优化选择器，如下所示。
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
请注意，其他一些答案中建议的 input[type=text] 不涵盖那些 HTML5 非文本输入，因此这不是一个好的选择器。
W3C HTML5 规范的 Section 4.10.22.2 Implicit submission 说：
表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该表单元素。如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段聚焦时，按下“enter”键会隐式提交表单），那么对于默认按钮已定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行合成点击激活步骤。注意：因此，如果禁用默认按钮，则在使用这种隐式提交机制时不会提交表单。 （按钮在禁用时没有激活行为。）
因此，禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮放置为表单中的第一个提交按钮：
<form action="...">
<!-- Prevent implicit submission of the form -->
<button type="submit" disabled style="display: none" aria-hidden="true"></button>
<!-- ... -->
<button type="submit">Submit</button>
</form>
这种方法的一个很好的特点是它可以在没有 JavaScript 的情况下工作。无论是否启用 JavaScript，都需要符合标准的 Web 浏览器来防止隐式提交表单。
<input type="submit" disabled style="display: none" aria-hidden="true" />，您可以将页面大小减小几个字符。 :-P
我必须捕获与按键相关的所有三个事件，以防止表单被提交：
var preventSubmit = function(event) {
if(event.keyCode == 13) {
console.log("caught ya!");
event.preventDefault();
//event.stopPropagation();
return false;
}
}
$("#search").keypress(preventSubmit);
$("#search").keydown(preventSubmit);
$("#search").keyup(preventSubmit);
您可以将以上所有内容组合成一个不错的紧凑版本：
$('#search').bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
$("#search").bind('keypress keyup keydown',preventSubmit) 之类的一种方法绑定多个事件；
<form> 标记中，因此输入键 将 提交表单...此解决方案禁用了输入键并修复了问题，谢谢@戴夫！然后我通过 id 为某些字段启用了 enter 键。
console.log，我更新了我的答案。
keypress keyup keydown 您会触发 if 条件中的任何代码两次。
如果您使用脚本进行实际提交，那么您可以将“return false”行添加到 onsubmit 处理程序，如下所示：
<form onsubmit="return false;">
从 JavaScript 对表单调用 submit() 不会触发事件。
利用：
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
此解决方案适用于网站上的所有表单（也适用于使用 Ajax 插入的表单），仅防止输入文本中的 Enter。把它放在一个文件准备功能中，一辈子忘记这个问题。
e.which 很好；无需将其更改为 e.keyCode。两者都为回车键返回值 13。请参阅 stackoverflow.com/a/4471635/292060 和 stackoverflow.com/a/18184976/292060
您可以保留表单并添加一些额外的客户端验证，而不是阻止用户按 Enter 键，这可能看起来不自然告诉需要完成什么才能完成表格。如果您使用的是 jQuery，请尝试 Validation 插件：
http://docs.jquery.com/Plugins/Validation
这将需要比按下 Enter 按钮更多的工作，但它肯定会提供更丰富的用户体验。
一个不错的简单的小 jQuery 解决方案：
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
return false;
}
});
var key = event.keyCode || event.which; if (key == 13) return false; 这样的普通 JS
完全不同的方法：
表单中的第一个
function(event) 而不是 function(e)。否则，它对我有用。谢谢你。
on("keydown", function(event) { enterPressed = true; }，然后在提交事件中执行 on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;} 这将确保无论延迟如何，它都能正常工作。
$(document).on("keydown","form", function(event)
{
node = event.target.nodeName.toLowerCase();
type = $(event.target).prop('type').toLowerCase();
if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169))
{
event.preventDefault();
return false;
}
});
它完美地工作！
我已使用此代码禁用输入类型 [文本] 和输入类型 [密码] 上的“ENTER”键，您可以添加其他输入类型 [电子邮件] 或也可以应用于您想要的输入类型。
$(document).on('keyup keypress', 'form input[type="text"] , input[type="password"]', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
如果使用 Vue，请使用以下代码来阻止用户按 Enter 提交表单：
<form @submit.prevent>...</form>
我有一个类似的问题，我有一个带有“ajax 文本字段”（Yii CGridView）的网格，只有一个提交按钮。每次我在文本字段上进行搜索并点击输入提交的表单。我不得不对按钮做一些事情，因为它是视图之间唯一的公共按钮（MVC 模式）。我所要做的就是删除 type="submit" 并放入 onclick="document.forms[0].submit()
我认为它很好地涵盖了所有答案，但是如果您使用带有一些 JavaScript 验证代码的按钮，您可以将表单的 onkeypress 设置为 Enter 以按预期调用您的提交：
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
onkeypress JS 可以是您需要做的任何事情。没有必要进行更大的全球性变革。如果您不是从头开始编写应用程序的人，并且您已经被带入修复其他人的网站而没有将其拆开并重新测试，则尤其如此。
如果您使用的是 Alpine，则可以使用以下命令通过按 Enter 来阻止表单提交：
<div x-data>
<form x-on:keydown.prevent.enter="">...</form>
</div>
或者，您可以使用 .window 修饰符在页面上的根 window 对象而不是元素上注册事件侦听器。
<form>
<div x-data>
<input x-on:keydown.window.prevent.enter="" type="text">
</div>
</form>
我在这里没有看到回答：当您浏览页面上的元素时，当您到达提交按钮时按 Enter 将触发表单上的 onsubmit 处理程序，但它会将事件记录为 MouseEvent。这是我涵盖大多数基础的简短解决方案：
这不是与 jQuery 相关的答案
HTML
<form onsubmit="return false;" method=post>
<input type="text" /><br />
<input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
<input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>
JavaScript
window.submitMouseOnly=function(evt){
let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}
要查找工作示例：https://jsfiddle.net/nemesarial/6rhogva2/
使用 Javascript（不检查任何输入字段）：
<script>
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
e.preventDefault();
return false;
}
}, true);
</script>
如果有人想将此应用于特定字段，例如输入类型文本：
<script>
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
e.preventDefault();
return false;
}
}
}, true);
</script>
这在我的情况下效果很好。
进入您的 css 并将其添加到其中，然后只要您有提交输入，如果您不再需要它，您可以将其删除或键入 activate 和 deactivate 来自动阻止公式的提交
input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
}
这会禁用页面上所有表单的输入键，并且不会阻止在 textarea 中输入。
// disable form submit with enter
$('form input:not([type="submit"])').keydown((e) => {
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
return true;
});
关注公众号
不定期副业成功案例分享
document上的keydown而不是window的情况（仅限 Internet Explorer）才能使其工作。&& !$(document.activeElement).is('textarea')添加到条件中，否则 textarea 内的换行符将被阻止（至少在 IE 中）。