Simulating keydown event in Chrome

Question

I am trying to simulate keydown event in Google chrome console. The site of my interest is web.whatsapp.com and the element of concern is document.getElementsByClassName("input-search")[0];

What I am trying to do is that as one types some text in that field, the contact list shown below that field gets updated with contacts containing the content in that text field.

Before trying anything else, I just set focus to this text field using this answer.

Things I tried are:

https://stackoverflow.com/a/12187302/1291122 - Nothing happens and no element is updated in the contact list shown.
https://stackoverflow.com/a/4176116/1291122 - Again, the same result.
https://stackoverflow.com/a/10520017/1291122 - Nothing happens. Same result

There were a few other sources as well. But nothing has worked. How do I simulate the exact effect (of typing some text in the text field and seeing the contact list update) using JavaScript the console?

My chrome version is the latest one as of the date of writing the answer- 41.0.2272.101 EDIT:

Here is one of the sample codes which I have tried. (From answer 3 above)

setTimeout(function () {
    $(".input-search").focus();
    Podium = {};
    Podium.keydown = function(k) {
        var oEvent = document.createEvent('KeyboardEvent');

        // Chromium Hack
        Object.defineProperty(oEvent, 'keyCode', {
            get : function() {
                return this.keyCodeVal;
            }
        });
        Object.defineProperty(oEvent, 'which', {
            get : function() {
                return this.keyCodeVal;
            }
        });

        if (oEvent.initKeyboardEvent) {
            oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k);
        } else {
            oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0);
        }

        oEvent.keyCodeVal = k;

        if (oEvent.keyCode !== k) {
            alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
        }

        document.dispatchEvent(oEvent);
    }
    Podium.keydown(83);
}, 5000);

Simply put this code in your chrome browser console(for web.whatsapp.com) and hit enter. Then immediately click on any part of your webpage(to transfer focus). After 5 seconds you would see the cursor on that text field. But key down event does not get invoked.

Its possible that you csn only simulate a user event from within another user event handler like a click — Zig Mandel, Mar 28 '15 at 02:06
@ZigMandel pls elaborate. Any code sample particular to my case on web.whatsapp.com? — rahulserver, Mar 28 '15 at 02:08
Try calling your code from within a click or keystroke handler and see if it works then. — Zig Mandel, Mar 28 '15 at 02:18

Toalp · Answer 1 · 2017-12-01T20:51:00.170

As I'm working on manipulating web.whatsapp.com with javascript, you can take a look at this function I created to type some text in the search input:

function searchContact(text)
{
    var input = document.getElementsByClassName("input input-search")[0];
    input.value = "";
    var evt = document.createEvent("TextEvent");
    evt.initTextEvent ("textInput", true, true, window, text, 0, "en-US");
    input.focus();
    input.dispatchEvent(evt);
}

input is the input element. evt is the typing event. text is the text you want to search.

This function does the following:

get the input -> clear it -> create a keyboard typing event -> focus the input -> apply the event on the input

EDIT: Since the wrriting of this answer, Whatsapp Web was updated and so this solution does not work anymore in Whatsapp Web. (might be useful for other places or projects)

A code dump without any explanation does not make a good answer, even if it does the job. Explain why your code works better. — Xan, Apr 21 '16 at 14:53

Simulating keydown event in Chrome

1 Answers1

Linked