CODEWITHSUNDEEP
javascriptselenium-webdriver
user1925406
user1925406

Reputation: 733

Simulating keyboard event through javascript

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>

Upvotes: 9

Views: 3770

Answers (3)

nym
nym

Reputation: 430

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.

Upvotes: 2

NeoWang
NeoWang

Reputation: 18513

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.

Upvotes: 0

adrield
adrield

Reputation: 625

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();
    }
});

Upvotes: 3

Related Questions