javascript 在javascript中模拟<enter>按键触发表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29268613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulate <enter> keypress in javascript to trigger a form-submit
提问by dx_over_dt
I've found a dozen different SO articles on how to do this, but none of them are working.
我已经找到了十多篇关于如何做到这一点的不同 SO 文章，但它们都没有奏效。
I'm trying to write some tests, and I want to test that when I press enterin an input, the form does indeed post back. However, I can't get it to simulate this.
我正在尝试编写一些测试，我想测试一下，当我按下enter时input，表单确实回传了。但是，我无法让它模拟这一点。
No matter which method I choose, the keypressevent is being triggered--event listeners see it--but the form isn't being submitted.
无论我选择哪种方法，keypress都会触发事件——事件侦听器看到它——但没有提交表单。
Html
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
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);
});
Is it possible to simulate an actual keypress like this?
是否可以模拟这样的实际按键？
If you focus on the text box (in jsFiddle) and physically press enter, the page will post back and will return something like:
如果您关注文本框（在 jsFiddle 中）并实际按下enter，页面将回发并返回如下内容：
This is what I'm trying to achieve, only in code.
这就是我想要实现的目标，仅在代码中。
Here's why:
原因如下：
$("input").on("keypress", function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
I ran into this in my code base, and I want to test that this sort of thing doesn't happen again.
我在我的代码库中遇到了这个问题，我想测试这种事情不会再发生。
回答by Rodrigo5244
To simulate the keypress eventon the input we have to use the KeyboardEvent constructorand pass the event to the input's dispatchEventmethod.
要模拟输入上的按键事件，我们必须使用KeyboardEvent 构造函数并将事件传递给输入的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>You can see more information on mdn documentation on triggering and creating events
您可以查看有关触发和创建事件的 mdn 文档的更多信息
