How do I programmatically trigger an “input” event without jQuery?

Question

I installed an event handler on an input using

var element = document.getElementById('some-input');
element.addEventListener('input', function() {
    console.log('The value is now ' + element.value);
});

As expected, the handler is triggered when I type into the text field, but I also need to invoke this handler from my code. How can I simulate the input event so that my event listener is called?

possible duplicate of stackoverflow.com/questions/2381572/… — user2473779
– user2473779, Commented Feb 26, 2016 at 18:52
@user2473779 The answer there implies that I should do element.input(), but that’s not a valid method. — bdesham
– bdesham, Commented Feb 26, 2016 at 18:56
jsfiddle.net/mendesjuan/rHMCy/4 : check this fiddle from @Juan Mendes' answer — user2473779
– user2473779, Commented Feb 26, 2016 at 19:01
@user2473779 The function given there doesn’t handle “input” events. See this modified version of the Fiddle, which uses an input element instead of an a element. Editing the text triggers the event listener but clicking the button just produces an error. — bdesham
– bdesham, Commented Feb 26, 2016 at 19:19

Gras Double · Accepted Answer · 2024-01-12 05:54:04Z

267

Create an Event object, and dispatch it:

var event = new Event('input', {
    bubbles: true,
});
  
element.dispatchEvent(event);

Or, as a one-liner:

element.dispatchEvent(new Event('input', { bubbles: true }));

FIDDLE

This is not supported in IE, for that the old-fashioned way has to be used:

var event = document.createEvent('Event');
event.initEvent('input', true, false);

element.dispatchEvent(event);

edited Jan 12, 2024 at 5:54

Gras Double

16.5k9 gold badges61 silver badges56 bronze badges

answered Feb 26, 2016 at 18:56

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

HelloWorld Over a year ago

@jeff-h From MDN: Older versions of IE supported an equivalent, proprietary EventTarget.fireEvent() method. developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

pmiguelpinto90 Over a year ago

A note: the default input event is not cancelable

Seph Reed Over a year ago

modern copy paste: element.dispatchEvent(new Event('input', { bubbles: true }))

light24bulbs Over a year ago

How is this difference from new InputEvent() and when should InputEvent be used instead?

Ben Richter Over a year ago

InputEvent is a newer Spec by MDN and not yet HTML standard, albeit widely supported. If you don't need it, I would simply use "Event" for it's been here forever and won't change much anymore. github.com/microsoft/TypeScript/issues/…

|

RedDragonWebDesign · Accepted Answer · 2021-11-13 16:41:34Z

41

element.dispatchEvent(new Event('input'));

edited Nov 13, 2021 at 16:41

answered Jun 30, 2020 at 14:30

RedDragonWebDesign

2,7572 gold badges27 silver badges26 bronze badges

Comments

Lahiru Chandima · Accepted Answer · 2020-05-31 05:17:31Z

26

If you are using react, following will work:

const valueSetter = Object.getOwnPropertyDescriptor(this.textInputRef, 'value').set;
const prototype = Object.getPrototypeOf(this.textInputRef);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(this.textInputRef, 'new value');
} else {
    valueSetter.call(this.textInputRef, 'new value');
}
this.textInputRef.dispatchEvent(new Event('input', { bubbles: true }));

answered May 31, 2020 at 5:17

Lahiru Chandima

24.4k26 gold badges116 silver badges202 bronze badges

3 Comments

dnaz Over a year ago

Object.getOwnPropertyDescriptor(this.textInputRef, 'value') -> returns undefined, sometimes.

OG Sean Over a year ago

YES - thank you. Was pulling my hair out on this when I realized the client site was a react app. Worked great when no other change or keypress methods were working and the textarea would just revert to blank upon losing focus. This fixed it and triggers the change event as needed.

ggorlen Aug 31 at 3:15

Related canonical: How to programmatically fill input elements built with React?

Collectives™ on Stack Overflow

How do I programmatically trigger an “input” event without jQuery?

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related