远程 preventDefault() 另一个函数中的表单

Question

我不太确定如何ask/word这个问题但是...

如何防止表单从另一个 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

假设您试图阻止当用户点击 "enter" 而输入字段处于焦点时提交表单：

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

event.keyCode 和 event.which 已弃用，但仍得到普遍支持。当前 "correct" 的方法是 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.

下面的代码示例将展示这一点。当您按回车键时，第一个文本字段将拦截，第二个不会。

(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.whosebug.com" onsubmit="alert('submit event');return false;">
    <input class="a" type="text">
    <input class="b" type="text">
    <input type="submit">
</form>

远程 preventDefault() 另一个函数中的表单

Remotely preventDefault() a Form in another Function

javascript

forms

jquery

preventdefault