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

【问题标题】：Remotely preventDefault() a Form in another Function远程 preventDefault() 另一个函数中的表单
【发布时间】：2018-07-26 14:55:11
【问题描述】：

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

如何防止表单从另一个 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){ ... 下添加上述逻辑，但输入时未检测到回车键。

【问题讨论】：

如果您的意思是将on('click keyup)` 逻辑放入 submit 函数处理程序，那么这就是您的问题。它应该放在 document.ready 处理函数的范围内
你用什么插件来自动完成？在这种情况下按 enter 不应触发输入上的 enter 键事件。
@RoryMcCrossan 不。我从来没有暗示过。
Please note that I've tried adding the logic above under $('#myForm1').submit(function 在这种情况下，这应该是什么意思？
当您按下箭头键时，焦点应该从输入移动到选择。此时，按 Enter 不会提交表单。

标签： javascript jquery forms preventdefault

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

【讨论】：

【解决方案2】：

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

如果您将您的事件更改为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.stackoverflow.com" onsubmit="alert('submit event');return false;">
    <input class="a" type="text">
    <input class="b" type="text">
    <input type="submit">
</form>

【讨论】：