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, Apr 25 '16 at 13:29
How about adding the `onkeydown` event to the DOM Element? Like: `` — , Apr 25 '16 at 13:34
Possible duplicate of [Invoking KeyPress Event Without Actually Pressing Key](http://stackoverflow.com/questions/10514123/invoking-keypress-event-without-actually-pressing-key) — Huso, Apr 25 '16 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, Apr 26 '16 at 10:55
yea right, this is just an example, 72 which is a keycode for "h" does not work either, also if there is some text already in the input field , backspace keycode 8 also does not work. in whole no keyboard event firing on input field. — Priyanka, Apr 26 '16 at 17:49
you can check the same code above with any website which have an input field, just change the id, on which you'll dispatch the event. — Priyanka, Apr 26 '16 at 17:52

score 4 · Accepted Answer · answered Apr 27 '16 at 08:39

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.

Rajiv · Answer 2 · 2016-04-28T09:26:31.470

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 '16 at 09:26

answered Apr 25 '16 at 17:19

Rajiv

78
10

1

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 Apr 25 '16 at 17:32
2

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. – Priyanka Apr 26 '16 at 06:23

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

2 Answers2