使用回车键阻止表单提交
Posted
技术标签:
【中文标题】使用回车键阻止表单提交【英文标题】：Prevent form submission with enter key 【发布时间】：2010-12-06 11:47:04 【问题描述】：我刚刚编写了这个在表单本身上工作的漂亮小函数...
$("#form").keypress(function(e)
if (e.which == 13)
var tagName = e.target.tagName.toLowerCase();
if (tagName !== "textarea")
return false;
);
在我的逻辑中，我想在输入文本区域期间接受回车。此外，将输入字段的 enter 键行为替换为 tab 到下一个输入字段的行为（就像按下 tab 键一样）将是一个额外的好处。有谁知道如何使用事件传播模型正确触发适当元素上的 enter 键，但阻止在其按下时提交表单？
【问题讨论】：
我刚刚意识到我在 KeyUp 事件上返回 false 而不是 KeyPress，这不会停止回发。我只是想我会提到这一点，以防有人遇到与我相同的问题。 你缺少尾随 ) 和结尾的 ; 【参考方案1】：为表单和输入设置触发器，但是当输入事件被触发时，通过调用stopPropagation方法停止传播到表单。
顺便说一句，恕我直言，将默认行为更改为任何普通用户习惯的任何东西都不是一件好事 - 这就是让他们在使用您的系统时生气的原因。但如果你坚持，那么stopPropagation 方法就是要走的路。
【讨论】：
【参考方案2】：您可以模仿 Tab 键按下而不是像这样输入输入：
//Press Enter in INPUT moves cursor to next INPUT
$('#form').find('.input').keypress(function(e)
if ( e.which == 13 ) // Enter key = keycode 13
$(this).next().focus(); //Use whatever selector necessary to focus the 'next' input
return false;
);
您显然需要弄清楚按下 Enter 时需要哪些选择器来关注 next 输入。
【讨论】：
需要添加--return false; 我喜欢你用这个 return false 来阻止整个输入； return false 必须移到条件块中。否则必须使用 return true。 如何避免光标在只读输入字段中成为焦点，例如跳过只读字段 @AitazazKhan 您可以使用tabindex 属性，但我认为您的光标最终还是会碰到它。您也可以在只读输入集中时设置一个 jQuery 事件并强制焦点到另一个元素......从未尝试过。
你可能会发现$(this).nextAll('INPUT').first().focus();比$(this).next().focus();更合适。试一试，看看有什么不同。【参考方案3】：
这是我的函数的修改版本。它执行以下操作：
-
阻止回车键工作
在其他形式的任何元素上
比文本区域、按钮、提交。
Enter 键现在起到制表符的作用。
preventDefault(), stopPropagation() 在元素上调用很好，但在表单上调用似乎会阻止事件到达元素。
所以我的解决方法是检查元素类型，如果类型不是文本区域（允许输入）或按钮/提交（输入 = 单击），那么我们只需 Tab 键即可。
在元素上调用 .next() 没有用，因为其他元素可能不是简单的同级元素，但是由于 DOM 几乎保证了选择时的顺序，所以一切都很好。
function preventEnterSubmit(e)
if (e.which == 13)
var $targ = $(e.target);
if (!$targ.is("textarea") && !$targ.is(":button,:submit"))
var focusNext = false;
$(this).find(":input:visible:not([disabled],[readonly]), a").each(function()
if (this === e.target)
focusNext = true;
else if (focusNext)
$(this).focus();
return false;
);
return false;
【讨论】：
如果不清楚，preventEnterSubmit 是表单的keypress 事件的处理程序。
如果你能添加对select的支持会更好
出于某种原因，我只是可以 不让它工作。 jQuery('#form_id').onkeypress(preventEnterSubmit(e); 返回一个引用错误，指出找不到 e；与更多迂回方法相同，例如 jQuery('#form_id').addEventListener('keypress', preventEnterSubmit(e)); 这里缺少什么？【参考方案4】：
从可用性的角度来看，将输入行为更改为模仿选项卡是一个非常糟糕的主意。用户习惯于使用回车键提交表单。这就是互联网的运作方式。你不应该破坏它。
【讨论】：
不一定总是。如果很清楚需要填写另一个字段，那么强制选项卡就可以了。只要下一个字段确实需要填写。 或者，如果您使用的是条形码扫描仪，它们会在发送完条形码编号后自动发送回车键。 而且...当您尝试手动从列表中选择时，Safari 使用 enter 进行选择 - 这是废话，但这就是它的作用 我一般同意这一点，但是，这就是我在这里的原因......我有一个包含添加地图点的表格，我不希望使用邮政编码搜索的用户不小心提交了表单（地图搜索字段也保存为表单的一部分，所以我无法将其完全拉出），有时会出现需要打破规则的情况 我发现用户对这种行为感到惊讶。 jquery validate 也不适用于输入键提交。【参考方案5】：回车键作为默认按钮的帖子描述了如何设置回车键按下的默认行为。但是，有时，您需要在按 Enter 键时禁用表单提交。如果你想完全阻止它，你需要在你的页面标签上使用 OnKeyPress 处理程序。
<body OnKeyPress="return disableKeyPress(event)">
javascript 代码应该是：
<script language="JavaScript">
function disableEnterKey(e)
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
</script>
如果要在输入字段中按下回车键时禁用表单提交，则必须在输入字段的 OnKeyPress 处理程序上使用上述函数，如下所示：
<input type="text" name="txtInput" onKeyPress="return disableEnterKey(event)">
来源：http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx
【讨论】：
这对我来说只是可行的解决方案。我的案例是带有自动填充选项的编辑，当您选择选项时按回车，对吗？在我的情况下，选择的选项没有传递给 js 函数，而是提交了表单。现在我可以通过这个小技巧来使用谷歌地图 API。它也适用于谷歌浏览器。谢谢。 @YevgeniyAfanasyev 很高兴您发现我的解决方案有帮助:)【参考方案6】：请注意，当按下回车键时，总是会提交单个输入表单。防止这种情况发生的唯一方法是：
<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>
【讨论】：
+1 提示：按下回车键时，总是会提交单个输入表单。 绝对精彩！【参考方案7】：就我而言，我只想在动态创建的字段中阻止它，并激活其他按钮，所以它有点不同。
$(document).on( 'keypress', '.input_class', function (e)
if (e.charCode==13)
$(this).parent('.container').children('.button_class').trigger('click');
return false;
);
在这种情况下，它将捕获该类的所有输入上的回车键，并触发它们旁边的按钮，并阻止提交主要表单。
注意输入和按钮必须在同一个容器中。
【讨论】：
【参考方案8】：以前的解决方案对我不起作用，但我确实找到了解决方案。
这等待任何按键，测试匹配 13，如果匹配则返回 false。
在
中function stopRKey(evt)
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.which == 13) && (node.type == "text"))
return false;
document.onkeypress = stopRKey;
【讨论】：
【参考方案9】：我更喜欢@Dmitriy Likhten 的解决方案，但是： 仅当我稍微更改代码时才有效：
[...] else
if (focusNext)
$(this).focus();
return false; //
否则脚本不起作用。 使用 Firefox 48.0.2
【讨论】：
【参考方案10】：我稍微修改了Dmitriy Likhten 的answer，效果很好。包括如何将函数引用到事件。请注意，您不包括 () 否则它将执行。我们只是传递一个引用。
$(document).ready(function ()
$("#item-form").keypress(preventEnterSubmit);
);
function preventEnterSubmit(e)
if (e.which == 13)
var $targ = $(e.target);
if (!$targ.is("textarea") && !$targ.is(":button,:submit"))
var focusNext = false;
$(this).find(":input:visible:not([disabled],[readonly]), a").each(function ()
if (this === e.target)
focusNext = true;
else
if (focusNext)
$(this).focus();
return false;
);
return false;
【讨论】：
以上是关于使用回车键阻止表单提交的主要内容，如果未能解决你的问题，请参考以下文章