Javascript - press enter key after updating input value

Question

I am trying to press the enter key programmatically using Javascript, but only after value of an input is updated, also using Javascript.

It is updating the value successfully but the enter key press is not taking place.

Please note that there are multiple inputs and the following code is inside a loop for all the inputs.

// update value of input
document.querySelectorAll("input[type='number']")[index].value = 5;
// press enter key
var el = document.querySelectorAll("input[type='number']")[index];
var ev = new KeyboardEvent('keydown', {altKey:false,
    bubbles: true,
    cancelBubble: false, 
    cancelable: true,
    charCode: 0,
    code: "Enter",
    composed: true,
    ctrlKey: false,
    currentTarget: null,
    defaultPrevented: true,
    detail: 0,
    eventPhase: 0,
    isComposing: false,
    isTrusted: true,
    key: "Enter",
    keyCode: 13,
    location: 0,
    metaKey: false,
    repeat: false,
    returnValue: false,
    shiftKey: false,
    type: "keydown",
    which: 13});
el.addEventListener('keydown', function () { 
    console.log("Press enter now");
    el.dispatchEvent(ev);
});

P.S. - This is for a chrome extension, to manipulate the inputs of a webpage, and those inputs require enter key to be pressed, for the cart to update.

I suspect the `keydown` event is not fired when an input field is filled programmatically, since you don't really press any keys. Another problem would be that you change the value and *then* register your keydown handler. Should be the other way around if the `keydown` handler works. — Peter Krebs, Aug 01 '22 at 08:42
I tired this out in Chrome and got the message "Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched." Which I assume is to prevent infinite loops. I'm not sure if there's any way to work around it. — DBS, Aug 01 '22 at 08:45
@PeterKrebs Dispatching an event like this should trigger the listener: https://jsfiddle.net/tkayusb6/ — DBS, Aug 01 '22 at 08:49
Try [Enter data into a custom-handled input field](https://stackoverflow.com/a/57900849) — wOxxOm, Aug 01 '22 at 11:43

score 2 · Accepted Answer · answered Aug 01 '22 at 09:02

I think you correctly saw the issue; you are trying to dispatch keydown event inside a keydown listener which would end in an infinite loop.

If you want to dispatch a keydown event after the value is updated programmatically, you should put the dispatch line after the value change line:

document.querySelectorAll("input[type='number']")[index].value = 5;
el.dispatchEvent(new Event('keydown'));

If you are not the one triggering the change of value, it is a bit different (and more complicated). Here are question 1 and question 2 that address that exact issue.

I used `new CustomEvent('change')` instead of `keydown` like the question 1 link you gave and dispatched after value update like you showed and it worked. — ILG, Aug 01 '22 at 12:05

Javascript - press enter key after updating input value

1 Answers1