javascript dispatchEvent Keypress, returns true , but input field is still empty

Question

I need to trigger or say dispatchEvent KeyPress inside an Input box, I have tried a lot with "initKeyboardEvent" , "initKeyEvent" , "createEvent", even I found similar question's answers but nothing seems to work, neither in firefox, nor in chrome (I think they may be deprecated), as KeyboardEvent.initKeyEvent(), is deprecated.

like we have

document.getElemntByID('button').click();

I want to do something like:

document.getElemntById('email').keyPress(charCode('a'));

but unfortunately I am not able to make keypress work in any way.

I know it is possible in jQuery , but I want to do it in pure javascript, after all jquery uses Javascript in backend , so there must be a way , if I am not wrong.

====Update=========
I wonder

 window.addEventListener('keydown', keyDown(), true);

function keyDown(){
alert('keydown');
}

var fireOnThis = document.getElementById('pwph');
if( window.KeyEvent ) {
    var evObj = document.createEvent('KeyEvents');
    evObj.initKeyEvent( 'keydown', true, true, window, false, false, false, false, 72, 0 );
} else {
    var evObj = document.createEvent('UIEvents');
    evObj.initUIEvent( 'keydown', true, true, window, 1 );
  evObj.keyCode = 72;
}
fireOnThis.dispatchEvent(evObj);

This code returns me true , and even the eventListner is catching this event, then why am I not able to see any text inside the input box? ====================update============================
This seems to work for everyone, but why does it leaves my text field empty, even after returning true?

// Create the event
var evt = document.createEvent( 'KeyboardEvent' );

// Init the options
evt.initKeyEvent(
             "keypress",        //  the kind of event
              true,             //  boolean "can it bubble?"
              true,             //  boolean "can it be cancelled?"
              null,             //  specifies the view context (usually window or null)
              false,            //  boolean "Ctrl key?"
              false,            //  boolean "Alt key?"
              false,            //  Boolean "Shift key?"
              false,            //  Boolean "Meta key?"
               9,               //  the keyCode
               0);              //  the charCode

// Dispatch the event on the element
el.dispatchEvent( evt );

charCode('a') will invoke the function... You need to pass function expression... — Rayon
– Rayon, Commented Apr 25, 2016 at 13:29
How about adding the onkeydown event to the DOM Element? Like: <input type="text" onkeydown="function()"> — user5797159
– user5797159, Commented Apr 25, 2016 at 13:34
Possible duplicate of Invoking KeyPress Event Without Actually Pressing Key — Huso
– Huso, Commented Apr 25, 2016 at 13:34
@Boratzan yea may be but that code does not work for me, I wonder why..returns me true but nothing happens to the input field ,it is still empty — Priyanka
– Priyanka, Commented Apr 26, 2016 at 10:55

Priyanka · Accepted Answer · 2016-04-27 08:39:00Z

5

I was trying to dispatch a keyPress event inside an Input element to pass the data-bind condition(KnockOut js) event , but unfortunately KeyPress didn't worked for me, Instead I used change event in place of it.

so I did this:

element = document.getElementById('idTxtBx_SAOTCS_ProofConfirmation');

    element.value = '8885';   // this alone was not working as keypress.

    var evt = document.createEvent("HTMLEvents"); 
        evt.initEvent("change", false, true); // adding this created a magic and passes it as if keypressed
        element.dispatchEvent(evt);

so .value and change event together made, fake inputText or keypressed event successful.

answered Apr 27, 2016 at 8:39

Priyanka

8362 gold badges9 silver badges22 bronze badges

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

Comments

Rajiv · Accepted Answer · 2016-04-28 09:26:31Z

0

i think so like you want to add event listener on input box

           var element = document.getElementById("email");

            document.getElementById("email").addEventListener("keypress", function() {
                console.log("keypresh")

            })
            var evt = document.createEvent("KeyboardEvent");
            evt.initEvent("keypress", false, true);
            // adding this created a magic and passes it as if keypressed
            element.dispatchEvent(evt);

edited Apr 28, 2016 at 9:26

answered Apr 25, 2016 at 17:19

Rajiv

7810 bronze badges

2 Comments

Priyanka Over a year ago

addEventListner is something which Listens when an event is fired,I don't want to Listen , I want to Fire or dispatch an event (keypress), on an Input field.

Priyanka Over a year ago

I have gone through this Link already, Mouse events works but not keyboard events: var keyEvent = new KeyboardEvent("keydown", {key : "a", char : "a", shiftKey: true}); document.getElementById('email').dispatchEvent(keyEvent); returns true , but does not enter any character in the input box whose ID is given.

Ahmet Turan · Accepted Answer · 2023-09-04 07:12:33Z

0

initEvent is deprecated or about to be removed. Instead, you can use it like this:

element = document.getElementById('idTxtBx_SAOTCS_ProofConfirmation');
element.value = '8885';   // this alone was not working as keypress.

const evt = new Event("change", {
    bubbles: false,
    cancelable: true
});

element.dispatchEvent(evt);

edited Sep 4, 2023 at 7:12

answered Sep 4, 2023 at 7:12

Ahmet Turan

11 bronze badge

Collectives™ on Stack Overflow

javascript dispatchEvent Keypress, returns true , but input field is still empty

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related