使用Enter键阻止表单提交

一尘不染

使用Enter键阻止表单提交

html

我只是写了这个漂亮的小函数，它可以在表单本身上工作…

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

按照我的逻辑，我想在输入textarea期间接受回车。同样，将输入字段的回车键行为替换为跳到下一个输入字段的行为（就像按下Tab键一样）将是额外的好处。有谁知道使用事件传播模型正确触发适当元素上的回车键，但阻止表单在其按下时提交的方法吗？

阅读 277

2020-05-10

共1个答案

一尘不染

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

防止Enter键在除textarea，button和Submit之外的表单的任何元素上起作用。
回车键现在就像一个标签。
preventDefault（），在元素上调用stopPropagation（）很好，但是在表单上调用似乎阻止事件到达元素。

因此，我的解决方法是检查元素类型，如果该类型不是textarea（允许输入），或者不是按钮/提交（enter = click），那么我们只需跳到下一页即可。

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

2020-05-10