使用回车键阻止表单提交

Question

我刚刚写了这个漂亮的小函数,它可以在表单上运行...

$("#form").keypress(function(e) {
    if (e.which == 13) {
        var tagName = e.target.tagName.toLowerCase(); 
        if (tagName !== "textarea") {
            return false;
        }
    }
});

在我的逻辑中,我希望在输入textarea期间接受回车.此外,将输入字段的输入键行为替换为tab到下一个输入字段的行为(就像按下Tab键一样)将是一个额外的好处.有没有人知道使用事件传播模型正确触发相应元素上的回车键的方法,但是阻止表单在其印刷机上提交？

Answer 1

您可以模仿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键时,您需要确定哪些选择器需要关注下一个输入.

Answer 2

请注意,按下回车键时,始终会提交单个输入表单.防止这种情况发生的唯一方法是:

<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>

Answer 3

这是我的功能的修改版本.它执行以下操作:

1. 阻止enter键处理除textarea,button,submit之外的表单的任何元素.
2. 现在,回车键就像一个标签.
3. 在元素上调用的preventDefault(),stopPropagation()很好,但是在窗体上调用似乎会阻止事件进入元素.

所以我的解决方法是检查元素类型,如果类型不是textarea(输入允许),或者按钮/提交(输入=单击),那么我们只需选择下一个选项.

在元素上调用.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;
        }
    }
}

Answer 4

从可用性的角度来看,更改输入行为以模仿选项卡是一个非常糟糕的主意.用户习惯使用回车键提交表单.这就是互联网的运作方式.你不应该打破这个.