Question

我不太确定如何问/说这个问题，但是...

如何防止表单从另一个jQuery函数提交？基本上，我具有具有自动完成功能的输入字段，最终用户可以使用上下箭头键浏览结果。最终用户可以按Enter键进行选择，但这会使表单提交。我想防止这种情况的发生。

$('body').on('click keyup', '.inputField1', function(e) {
    if(e.keyCode===13){           
        // Attempting to remotely prevent the form from submitting
        var form = $(this).closest('form');
        form.preventDefault();
        form.stopPropagation();
        return false;
    }

    // auto-complete logic below
    // ...

});

请注意，我已尝试在$('#myForm1').submit(function(e){ ...下添加上述逻辑，但是在输入时未检测到回车键。

Answer 1

假设您试图阻止在输入字段处于焦点状态时用户单击“输入”时提交表单：

您想要将此处理程序附加到输入字段本身，并且应该使用keydown或keypress事件而不是keyup事件（在表单提交开始后发生）。您要阻止的不是表单提交，而是触发表单提交的事件的默认操作，因此请针对事件而不是表单调用preventDefault()。

event.keyCode和event.which已过时，但仍得到普遍支持。当前执行此操作的“正确”方法为if (event.key === "Enter")，但在某些较旧的浏览器中可能无法使用（请注意，当前的IE和Edge某些键仍使用nonstandard identifiers。）

// It's not necessary to delegate the event from 'body', unless the form field is added to the DOM after this is called.
$('.inputField1').on('keydown', function(e) {
  if (e.keyCode === 13) {  
    e.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="https://example.com">
  <input class="inputField1">
  <input type="submit">
</form>

Answer 2

您的问题是表单上keyup之前的输入触发器上的submit。

如果您将事件更改为keypress，则会发现您可以在提交表单之前拦截提交事件。

此外，您应该使用event.which而不是event.keyCode-jQuery使.which标准化，但我认为它对.keyCode的作用不相同。

以下代码示例将对此进行演示。按Enter键时，第一个文本字段将被截取，第二个文本字段将不被截取。

(function($) {
    $(function() {
        $('body').on('keypress', '.a', function(event) {
            if(event.which == 13) {
                alert('You pressed enter');
                event.preventDefault();
            }
        });
    });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" action="https://www.stackoverflow.com" onsubmit="alert('submit event');return false;">
    <input class="a" type="text">
    <input class="b" type="text">
    <input type="submit">
</form>

远程防止Default（）另一个函数中的表单

2 个答案: