Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to simulate key presses or a click with JavaScript?

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?

like image 337
milan Avatar asked Nov 11 '10 20:11

milan


People also ask

How do you simulate key presses?

To simulate native-language keystrokes, you can also use the [Xnn] or [Dnn] constants in the string passed to the Keys method. nn specifies the virtual-key code of the key to be “pressed”. For instance, [X221]u[X221]e will “type” the u and e characters with the circumflex accent.

How do you simulate a keyboard using JavaScript?

Use the dispatchEvent Method to Simulate Keypress in JavaScript. We can use the dispatchEvent method to trigger a specific event. Copy window. addEventListener('keydown', (e) => { console.

Is it possible to simulate key press event programmatically?

The answer is: There is no way to programmatically trigger input keys in the sandboxed browser environment under normal circumstances.

How do you say if a key is pressed in JavaScript?

Using JavaScript In plain JavaScript, you can use the EventTarget. addEventListener() method to listen for keyup event. When it occurs, check the keyCode 's value to see if an Enter key is pressed.


1 Answers

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:

  1. keydown (often has default action such as fire click, submit, or textInput events)
  2. keypress (if the key isn't just a modifier key like Shift or Ctrl)
  3. (keydown, keypress) with repeat=true if the user holds down the button
  4. default actions of keydown!!
  5. 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.

like image 141
yonran Avatar answered Sep 25 '22 16:09

yonran