How to simulate key presses or a click with JavaScript

Question

I wrote a Google Chrome extension and the site that I want to use my extension on requires me to click or tab onto a text box (because I think it runs javaScript verification "onClick" only). I can get the text in the box with my extension using:

document.getElementById("input1").value = 'test';

But when I click submit, it thinks I did not enter anything in the "input1" text box because I never clicked it or tabbed on it.

Can someone help me get around this?

User · Answer

you can raise the click event on an element by doing

// this must be done after input1 exists in the DOM
var element = document.getElementById("input1");

if (element) element.click();

Example here

User · Answer

Focus might be what your looking for  With tabbing or clicking I think u mean giving the element the focus  Same code as Russ  Sorry i stole it  P  but firing an other event      this must be done after input1 exists in the DOM var element   document getElementById  input1     if  element  element focus

User · Answer

Simulating a mouse click  My guess is that the webpage is listening to mousedown rather than click  which is bad for accessibility because when a user uses the keyboard  only focus and click are fired  not mousedown   So you should simulate mousedown  click  and mouseup  which  by the way  is what the iPhone  iPod Touch  and iPad do on tap events    To simulate the mouse events  you can use this snippet for browsers that support DOM 2 Events  For a more foolproof simulation  fill in the mouse position using initMouseEvent instead      DOM 2 Events var dispatchMouseEvent   function target  var args      var e   document createEvent  MouseEvents         If you need clientX  clientY  etc   you can call      initMouseEvent instead of initEvent   e initEvent apply e  Array prototype slice call arguments  1      target dispatchEvent e      dispatchMouseEvent element   mouseover   true  true   dispatchMouseEvent element   mousedown   true  true   dispatchMouseEvent element   click   true  true   dispatchMouseEvent element   mouseup   true  true     When you fire a simulated click event  the browser will actually fire the default action  e g  navigate to the link s href  or submit a form    In IE  the equivalent snippet is this  unverified since I don t have IE   I don t think you can give the event handler mouse positions      IE 5 5  element fireEvent  onmouseover    element fireEvent  onmousedown    element fireEvent  onclick        or element click   element fireEvent  onmouseup      Simulating keydown and keypress  You can simulate keydown and keypress events  but unfortunately in Chrome they only fire the event handlers and don t perform any of the default actions  I think this is because the DOM 3 Events working draft describes this funky order of key events    keydown  often has default action such as fire click  submit  or textInput events  keypress  if the key isn t just a modifier key like Shift or Ctrl   keydown  keypress  with repeat true if the user holds down the button default actions of keydown   keyup   This means that you have to  while combing the HTML5 and DOM 3 Events drafts  simulate a large amount of what the browser would otherwise do  I hate it when I have to do that  For example  this is roughly how to simulate a key press on an input or textarea      DOM 3 Events var dispatchKeyboardEvent   function target  initKeyboradEvent args      var e   document createEvent  KeyboardEvents      e initKeyboardEvent apply e  Array prototype slice call arguments  1      target dispatchEvent e      var dispatchTextEvent   function target  initTextEvent args      var e   document createEvent  TextEvent      e initTextEvent apply e  Array prototype slice call arguments  1      target dispatchEvent e      var dispatchSimpleEvent   function target  type  canBubble  cancelable      var e   document createEvent  Event      e initEvent apply e  Array prototype slice call arguments  1      target dispatchEvent e       var canceled    dispatchKeyboardEvent element       keydown   true  true      type  bubbles  cancelable     null      window      h       key     0     location  0 standard  1 left  2 right  3 numpad  4 mobile  5 joystick              space-sparated Shift  Control  Alt  etc  dispatchKeyboardEvent      element   keypress   true  true  null   h   0       if   canceled      if  dispatchTextEvent element   textInput   true  true  null   h   0         element value     h       dispatchSimpleEvent element   input   false  false          not supported in Chrome yet        if  element form  element form dispatchFormInput        dispatchSimpleEvent element   change   false  false          not supported in Chrome yet        if  element form  element form dispatchFormChange          dispatchKeyboardEvent      element   keyup   true  true  null   h   0         I don t think it is possible to simulate key events in IE

User · Answer

For simulating keyboard events in Chrome:

There is a related bug in webkit that keyboard events when initialized with initKeyboardEvent get an incorrect keyCode and charCode of 0: https://bugs.webkit.org/show_bug.cgi?id=16735

A working solution for it is posted in this SO answer.

User · Answer

Or even shorter  with only standard modern Javascript   var first link   document getElementsByTagName  a   0   first link dispatchEvent new MouseEvent  click       The new MouseEvent constructor takes a required event type name  then an optional object  at least in Chrome   So you could  for example  set some properties of the event   first link dispatchEvent new MouseEvent  click    bubbles  true  cancelable  true

[javascript] How to simulate key presses or a click with JavaScript?

The answer is

Examples related to javascript

Examples related to google-chrome

Examples related to google-chrome-extension

Tags