在 javascript 中模拟 <enter> 按键以触发表单提交

Question

我找到了十多篇关于如何执行此操作的不同 SO 文章，但没有一篇有效。

我正在尝试编写一些测试，并且我想测试当我在 input 中按 enter 时，表单确实会回发。但是，我无法让它模拟这个。

无论我选择哪种方法，keypress 事件都会被触发——事件侦听器会看到它——但不会提交表单。

jsFiddle link:

HTML

<!-- returns an error on submit, but that's fine... 
     we're only seeing if we can get a submit to happen -->
<form action="POST">
    <input id="myinput" type='text' value="foo" />
</form>

<div id="output"></div>

Javascript

$(function () {
    var $input = $("#myinput");
    $input.on("keypress", function (evt) {
        $("#output").append("Typed: " + evt.keyCode + ", but the form didn't submit.<br>");
    });

    $("form").on("submit", function () { alert("The form submitted!"); } );

    // try jQuery event
    var e = $.Event("keypress", {
        keyCode: 13
    });
    $input.trigger(e);

    // try vanilla javascript
    var input = $input[0];
    e = new Event("keypress");
    e.keyCode = 13;
    e.target = input;
    input.dispatchEvent(e);

    e = document.createEvent("HTMLEvents");
    e.initEvent("keypress", true, true);
    e.keyCode = 13;
    e.target = input;
    input.dispatchEvent(e);
});

是否可以像这样模拟实际的按键操作？

如果您专注于文本框（在 jsFiddle 中）并实际按下 enter，页面将返回并返回如下内容：

这就是我想要实现的，仅在代码中。

原因如下：

$("input").on("keypress", function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
    }
});

我在我的代码库中遇到了这个问题，我想测试一下这种事情不会再次发生。

Answer 1

要在输入上模拟keypress event，我们必须使用KeyboardEvent constructor 并将事件传递给输入的dispatchEvent 方法。

const event = new KeyboardEvent("keypress", {
  view: window,
  keyCode: 13,
  bubbles: true,
  cancelable: true
});

document.querySelector("input").dispatchEvent(event);

<!-- returns an error on submit, but that's fine... 
     we're only seeing if we can get a submit to happen -->
<form action="POST">
    <input id="myinput" type='text' value="foo" />
</form>

<div id="output"></div>

您可以在mdn documentation on triggering and creating events查看更多信息