有没有一种方法来模拟按键或用JavaScript点击？ [英] Is there a way to simulate key presses or a click with javascript?

问题描述

我写了一个google chrome扩展，并且我想要使用我的扩展的站点要求我单击或选择一个文本框（因为我认为它仅运行javascript验证onclick）。现在我可以使用扩展名来获取文本框：

  document.getElementById（input1）。value ='测试'; 
  

但是当我点击提交时，它认为我没有在input1文本框中输入任何内容，因为我从来没有点击过它或选中它。

有人可以帮我解决这个问题吗？谢谢。

解决方案

模拟鼠标点击

我的猜测是网页正在监听mousedown而不是点击（这对于可访问性是不利的，因为当用户使用键盘时，只有焦点和点击被触发，而不是mousedown）。所以你应该模拟mousedown，click和mouseup（顺便说一句， iPhone，iPod Touch和iPad在点击事件中的作用）。

为了模拟鼠标事件，您可以使用此代码片段来支持浏览器 DOM 2 Events 。对于更加简单的模拟，请使用 initMouseEvent 填充鼠标位置。

  // DOM 2 Events 
 var dispatchMouseEvent = function（target，var_args）{
 var e = document.createEvent（MouseEvents）; 
 //如果你需要clientX，clientY等，你可以调用
 // initMouseEvent而不是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）; 
  

当您触发模拟点击事件时，浏览器实际上会触发默认操作（例如导航到链接的href或提交表单）。

在IE中，等效片段是这个（未验证，因为我没有IE）。

  // IE 5.5+ 
 element.fireEvent （ 的onmouseover）; 
 element.fireEvent（onmousedown）; 
 element.fireEvent（onclick）; //或element.click（）
 element.fireEvent（onmouseup）; 
  

模拟keydown和keypress

您可以模拟keydown和按键事件，但不幸的是在Chrome中它们只触发事件处理程序并且不执行任何默认操作。我认为这是因为DOM 3 Events的工作草案描述了这个时髦的关键事件顺序：

1. keydown（通常具有默认操作，例如fire click，submit或textInput事件）


2. 按键（如果按键不仅仅是像Shift或Ctrl这样的修饰键）
   
3. （keydown，keypress）with repeat = true如果用户按住按钮


4. keydown的默认动作


5. keyup





这意味着您必须（在梳理 HTML5 和 DOM 3 Events 草案）模拟了浏览器在其他方面做的大量工作。当我必须这样做时，我讨厌它。例如，这大概是如何模拟输入或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 cancel =！dispatchKeyboardEvent（element，$ b $'keydown'，true，true，// type，bubbles，cancelable 
 null，// window 
'h '，//键
 0，//位置：0 =标准，1 =左，2 =右，3 =小键盘，4 =移动，5 =操纵杆
''）; // Space-sparated Shift，Control，Alt等
 dispatchKeyboardEvent（
元素，'keypress'，true，true，null，'h'，0，''）; 
 if（！cancel）{
 if（dispatchTextEvent（element，'textInput'，true，true，null，'h'，0））{
 element.value + ='h' ; 
 dispatchSimpleEvent（element，'input'，false，false）; 
 //在Chrome中不支持
 // if（element.form）element.form.dispatchFormInput（）; 
 dispatchSimpleEvent（element，'change'，false，false）; 
 //在Chrome中不支持
 // if（element.form）element.form.dispatchFormChange（）; 
} 
} 
 dispatchKeyboardEvent（
 element，'keyup'，true，true，null，'h'，0，''）; 
  

我不认为有可能在IE中模拟关键事件。




I wrote a google chrome extension and the site that I want to use my extension on requirements me to click or tab onto a text box (because I think it runs javascript verification "onclick" only). Now 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 please? Thank you.

解决方案

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.

这篇关于有没有一种方法来模拟按键或用JavaScript点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！