Simulate <enter> keypress in javascript to trigger a form-submit - Stack Overflow

admin管理员组

文章数量:1430471

I've found a dozen different SO articles on how to do this, but none of them are working.

I'm trying to write some tests, and I want to test that when I press enter in an input, the form does indeed post back. However, I can't get it to simulate this.

No matter which method I choose, the keypress event is being triggered--event listeners see it--but the form isn't being submitted.

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);
});

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:

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.

I've found a dozen different SO articles on how to do this, but none of them are working.

I'm trying to write some tests, and I want to test that when I press enter in an input, the form does indeed post back. However, I can't get it to simulate this.

No matter which method I choose, the keypress event is being triggered--event listeners see it--but the form isn't being submitted.

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);
});

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:

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.

• javascript

Share Improve this question Follow edited Nov 24, 2017 at 6:17 sudo 66811 gold badge66 silver badges1717 bronze badges asked Mar 25, 2015 at 23:43 dx_over_dtdx_over_dt 14.4k1717 gold badges6868 silver badges125125 bronze badges 13

• i got three times "Typed: 13" when i just call your link on osx with chrome, ff and safari...so looks like its working? – marvwhere Commented Mar 25, 2015 at 23:46
• 1 Focus on the textbox and actually press <enter>... That's the behavior I'm looking for – dx_over_dt Commented Mar 25, 2015 at 23:47
• 1 The keypress is working but i 'think' he's saying that the form submission which happens when you 'press' the enter button manually is not being sent.. i think this is a security thing. Stopping you from auto posting forms perhaps? I'll go and look. – Kevin C Jones Commented Mar 25, 2015 at 23:50
• 1 @KevinCJones If that is what he is trying to do, using form.submit() is the way. – Ismael Miguel Commented Mar 25, 2015 at 23:52
• 2 I don't think you can do it, but if this is for user simulation e.g. tests, as you put it, i think you could just do any of your examples but simply capture that keycode 13 was clicked and call the submit function instead... If this was purely an academic excercise, i've even looked into this stackoverflow./a/18937620/4682576 but didn't find any joy.. – Kevin C Jones Commented Mar 26, 2015 at 0:07

 |  Show 8 more ments

1 Answer 1

Sorted by: Reset to default -2

To simulate the keypress event on the input we have to use the KeyboardEvent constructor and pass the event to the input's dispatchEvent method.

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

本文标签： Simulate ltentergt keypress in javascript to trigger a formsubmitStack Overflow