小编典典

如何使用JavaScript模拟按键或点击?

javascript

我写了一个Google Chrome扩展程序,要在其上使用扩展程序的网站要求我单击或制表到文本框(因为我认为它仅运行javaScript验证“
onClick”)。我可以使用以下扩展名在框中输入带有扩展名的文本:

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

但是,当我单击提交时,它认为我没有在“ input1”文本框中输入任何内容,因为我从未单击过它或在其上使用选项卡。

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


阅读 1000

收藏
2020-05-01

共1个答案

小编典典

模拟鼠标单击

我的猜测是网页正在听鼠标按下而不是单击(这对可访问性不利,因为当用户使用键盘时,仅触发焦点和单击,而不是按下鼠标)。因此,您应该模拟mousedown,click和mouseup顺便说一下,这就是iPhone,iPodTouch和iPad在点击事件中所做的事情。

要模拟鼠标事件,可以将此片段用于支持DOM2Events的浏览器。对于更简单的模拟,请使用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事件,但是不幸的是,在Chrome中,它们仅触发事件处理程序,并且不执行任何默认操作。我认为这是因为DOM3事件工作草案描述了关键事件的这种时髦顺序:

  1. 按下(通常具有默认操作,例如点击,提交或textInput事件)
  2. 按键(如果该键不仅仅是Shift或Ctrl等修饰键)
  3. (keydown,keypress)如果用户按住按钮,则repeat = true
  4. 默认的按键动作!!
  5. 键控

这意味着您必须(在合并HTML5和DOM3事件草稿时)模拟浏览器原本会执行的大量操作。我讨厌这样做。例如,这大致是模拟输入或文本区域上的按键的方法。

// 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中模拟关键事件。

2020-05-01