Simulating keyboard event through javascript

Question

I'm trying to simualte keyboard events in webpage through javascript since Actions is not supported in safari browser.

To Start with I created a simple form (given below) and trying to tab through the text boxes but it didn't work.

Java script used: (ubuntu and chrome browser). I fired the script in the chrome browser console.

var pressTabKey = document.createEvent("KeyboardEvent");
pressTabKey.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 9, 0);
document.getElementById('1234').focus();
document.getElementById('1234').dispatchEvent(pressTabKey);

HTML Form:

   <html>      
   <head>         
   </head>   
   <body>
        <p>Test Page </p>      
        <form>
        <input  id="1234" type="text" value="Enter Here"> 
        <br>
        <br>
        <input  id="1235" type="text" value="Enter Here">           
        </form>  
  </body>   
  </html>

Isn't it a duplicate of http://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript? — Capsule, Sep 16 '15 at 03:33
I did go through that thread and used those functions and parameters. But I couldn't simulate keyboard events like tabbing eventhough I could simulate mouse events. Anyway, I would checks those two blogs again. — user1925406, Sep 16 '15 at 04:08
Maybe this is of help: http://stackoverflow.com/questions/596481/simulate-javascript-key-events — Jos, Sep 21 '15 at 15:21
When I tried the code you showed above - https://jsfiddle.net/pymgnbk9/2/ - it tabbed to the first input field as expected, so not sure what is wrong. Did you make sure the HTML loaded before calling the JS? — jjbskir, Sep 22 '15 at 15:58
Sorry, why can't you just do the jumps with `focus()` ? https://jsfiddle.net/pymgnbk9/3/ — webdeb, Sep 23 '15 at 00:33

adrield · Answer 1 · 2015-09-17T14:48:35.560

Hope this helps:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Example: I create an event and use dispatchEvent() to trigger it:

var pressTabKey = new Event('keydown');
document.getElementById('1234').addEventListener('keydown', function() { alert("hi!"); });
document.getElementById('1234').dispatchEvent(pressTabKey);

The function createEvent() is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent

EDIT: You could simply read the key code from a keydown or keypress event, like so:

http://jsfiddle.net/adrielD/me9q1qu6/

HTML

<p>Test Page </p>      
<form>
    <input id="1234" type="text" value="Enter Here"><br>
    <input id="1235" type="text" value="Enter Here">          
</form>

JS:

var tab1 = document.getElementById("1234");
var tab2 = document.getElementById("1235");

tab1.addEventListener("keydown", function(event) {
     if(event.keyCode == 9) {
        event.preventDefault();
        tab2.focus();
     }
});

tab2.addEventListener("keydown", function(event) {
    if(event.keyCode == 9) {
        event.preventDefault();
        tab1.focus();
    }
});

score 2 · Answer 2 · answered Sep 22 '15 at 20:40

If you happen to have jQuery loaded, you can do it like this:

$(el).trigger({type: 'keypress', which: 13, keyCode: 13});

Which for your example would be:

$("#1234").trigger({type: 'keypress', which: 9, keyCode: 9});

See http://api.jquery.com/trigger/ for the full documentation.

score 0 · Answer 3 · edited May 23 '17 at 11:44

I have met exactly the same problem, tried many things, and end up using AHK to trigger the keyboard event (and some mouse events). I just cannot find any selenium-only solution. AHK is for Windows only, though. If you are using selenium on other platforms, like Mac OS, check out this thread.

With AHK, it is fairly easy to do a key press, after setting the focus, just start the AHK script, in which you 'send the key':

send, abc

AHK has a full-blown scripting language, so you can wrap this in a loop/conditional. You can also simulate mouse clicks at a specific position, if necessary.

Simulating keyboard event through javascript

3 Answers3