Question

我写了一个谷歌浏览器扩展程序，我想要使用我的扩展程序的网站要求我点击或标签到文本框（因为我认为它只运行javaScript验证“onClick”）。我可以使用我的扩展程序在框中获取文本：

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

但是当我点击提交时，它认为我没有在“input1”文本框中输入任何内容，因为我从未点击过它或在其上打勾。

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

Answer 1

模拟鼠标点击

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

要模拟鼠标事件，您可以将此代码段用于支持DOM 2 Events的浏览器。要进行更加简单的模拟，请使用initMouseEvent填写鼠标位置。

// 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);

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

在IE中，等效片段是这样的（未经验证，因为我没有IE）。我认为你不能给事件处理程序鼠标位置。

// IE 5.5+
element.fireEvent("onmouseover");
element.fireEvent("onmousedown");
element.fireEvent("onclick");  // or element.click()
element.fireEvent("onmouseup");

模拟keydown和keypress

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

keydown（通常有默认操作，如fire click，submit或textInput events）
keypress（如果键不仅仅是Shift或Ctrl等修饰键）
（keydown，keypress），如果用户按下按钮
keydown的默认操作!!
KEYUP

这意味着您必须（在梳理HTML5和DOM 3 Events草稿时）模拟浏览器本来会执行的大量操作。当我不得不这样做时，我讨厌它。例如，这大致是如何模拟输入或文本区域上的按键。

// 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, '');

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

Answer 2

您可以通过执行

来提升元素上的click事件

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

if (element) element.click();

<强> Example here

Answer 3

甚至更短，仅使用标准的现代Javascript：

var first_link = document.getElementsByTagName('a')[0];
first_link.dispatchEvent(new MouseEvent('click'));

new MouseEvent构造函数采用必需的事件类型名称，然后是可选对象（至少在Chrome中）。例如，您可以设置事件的一些属性：

first_link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));

Answer 4

在Chrome中模拟键盘事件：

webkit中存在一个与初始化时键盘事件相关的错误 initKeyboardEvent得到一个不正确的keyCode和charCode为0：https://bugs.webkit.org/show_bug.cgi?id=16735

它的工作解决方案发布在this SO answer。

Answer 5

焦点可能是你想要的。使用Tab键或点击我认为你的意思是给予元素焦点。与Russ相同的代码（对不起，我偷了它：P）但发射了另一个事件。

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

if (element) element.focus();

如何使用JavaScript模拟按键或单击？

5 个答案:

模拟鼠标点击

模拟keydown和keypress