在javascript中模拟<enter> keypress以触发表单提交</enter>

Question

我发现了十几篇关于如何做到这一点的SO文章，但没有一篇正在发挥作用。

我试图编写一些测试，我想测试一下，当我在input中按输入时，表单确实会回发。但是，我无法通过它来模拟这一点。

无论我选择哪种方法，都会触发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中）并按输入，页面将回发并返回如下内容：

这就是我尝试实现的目标，仅限于代码。

这就是原因：

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

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

Answer 1

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

＆＃13;

＆＃13;

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

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

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

您可以在mdn documentation on triggering and creating events

上查看更多信息