use JavaScript to press enter key to trigger pre-defined events

Question

I need to use JavaScript to update some data in a input field, and then programmatically to simulate a "Enter" keypress in order to fire up some events of that field to validate data.

Note that I didn't develop the site. I just do some add-on script for some customization. Therefore, I don't know what exact events attached to that field, or to be fired. All I know is if I do it manually, after key in item# and press enter, it will do something for validation.

I searched result here before. I have tried following 3 methods and all failed.

Any more ideas on how to solve?

#1:

const kexx = new KeyboardEvent('keypress', {
    bubbles: true, cancelable: true, keyCode: 13
});
    
inputEle.dispatchEvent(kexx);

#2:

    var exx = jQuery.Event("keypress");
    exx.which = 13; //choose the one you want
    exx.keyCode = 13;

$(inputEle).trigger(exx);

#3:

$(inputEle).val(itemnbrInputAry[i]).trigger('keyup');

If you're not sure which event is being listened for on the target input, here's a guide to figuring that out: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners — Kinglish, Feb 04 '22 at 20:50
And here's two of the many questions on Stack Overflow about how to figure it out: [How to find out which JavaScript events fired?](https://stackoverflow.com/q/3787555/215552) and [Get all events handlers attached to an element](https://stackoverflow.com/q/18116163/215552) — Heretic Monkey, Feb 04 '22 at 20:55
https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically — Slava Knyazev, Feb 04 '22 at 22:23

zer00ne · Answer 1 · 2022-02-04T22:43:51.343

"submit" event will trigger validation if something is invalid. The "submit" event can only be triggered on the <form> it doesn't originate from any other element.

Programmaically clicking a submit button with the .click() method will trigger a real "submit" event. All details about the "submit" event are in example below.

const io = document.forms.ui.elements;

const triggerSubmit = e => e.target.form.submit();

const clickSubmit = e => io.S1.click();

io.B1.onclick = triggerSubmit;

io.B4.onclick = clickSubmit;

:root {
  font: 1ch/1.5 'Segoe UI'
}

body {
  font-size: 2ch
}

form {
  font-size: 1.5rem
}

[type='text'],
button,
label {
  display: block;
  font: inherit;
  margin: 3px 5px
}

button {
  display: inline-block;
}

[type='text'] {
  width: 95%;
}

code {
  font-family: Consolas;
  font-weight: 900;
  color: green
}

kbd {
  font-weight: 900;
  color: #930
}

legend {
  font-size: 2rem
}

section {
  width: 90%;
  margin: 3px auto;
  font-size: 1.5rem
}

p {
  margin-top: 0
}

<form id='ui'>
  <fieldset>
    <legend>Submit Event</legend>
    <label>Once the inputs are valid, and focus is on either one of them, hitting the <kbd>Enter/Return</kbd> key triggers a "submit" event on the <code>form</code></label>
    <input name='A' type='text' placeholder='This does not have the [required] attribute'>
    <input name='B' type='text' placeholder='This has the [required] attribute' required>
    <label>Both buttons are functionally identical. They both trigger a "submit" event on the <code>form</code></label>
    <button id='S1'>Submit</button>
    <input id='S2' type='submit' value='Submit'>
  </fieldset>
</form>
<section>
  <button name='B1' form='ui' type='button'>#1</button>
  <button name='B2' form='ui' type='button'>#2</button>
  <button name='B3' form='ui'>#3</button>
  <button name='B4' form='ui' type='button'>#4</button>
  <p>Button <kbd>#1</kbd>, <kbd>#2</kbd>, and <kbd>#3</kbd> are associated to <code>form</code> by the <code>[form]</code> attribute. <kbd>#2</kbd> is inert but <kbd>#1</kbd> has an event handler bound to it called <code>triggerSubmit(e)</code> which executes
    an <i>"synthetic"</i> "submit" event using <code>.submit()</code> method. This synthetic submit event bypasses validation. Neither <kbd>#1</kbd> or <kbd>#2</kbd> could invoke a "submit" event normally because they have <code>[type="button"]</code>    attribute. <kbd>#3</kbd> does not have any <code>[type]</code> attribute and is associated to <code>form</code> so it will trigger a "submit" event.</p>
<p>Added <kbd>#4</kbd> button to simulate a "click" on a the first button in <code>form</code>. Programmaically clicking a submit button will trigger a real "submit" event.</p>
</section>

I don't need to submit when press "Enter" key. The page is built that enter key doesn't submit form. The enter key is pressed in the input field focus in order trigger some events to do data validation. so I want to programmatically simulate human pressing enter key. — Wayne Liu, Feb 04 '22 at 23:00
Data validation happens when submit fires, submit happens when enter key is clicked and focus is on a form control. That is the only event that fit the behavior you have been describing. And the submit event can bypass validation with `event.preventDefault()` which isn't built-in in your form obviously. Your form is behaving exactly as it should without any JS. — zer00ne, Feb 04 '22 at 23:03
In the example there two ways to programmatically submit a form. One will trigger validation and the other bypasses it. Did you bother to look at the example or you're convinced that you know enough that you think I'm wrong. You really shouldn't ask questions if you have all the answers. Take look at [XY problem](https://xyproblem.info/) — zer00ne, Feb 04 '22 at 23:12

use JavaScript to press enter key to trigger pre-defined events

1 Answers1