使用回车键阻止表单提交答案

【问题标题】：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，这不会停止回发。我只是想我会提到这一点，以防有人遇到与我相同的问题。
你缺少尾随 )
和结尾的 ;

标签： javascript jquery html

【解决方案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;
        }
    }
}

【讨论】：