如何使用 JavaScript 模拟按键或点击? [英] How to simulate key presses or a click with JavaScript?

问题描述

我编写了一个 Google Chrome 扩展程序，我想在该站点上使用我的扩展程序需要我单击或选择文本框(因为我认为它仅运行 javaScript 验证onClick").我可以使用扩展名获取框中的文本:

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';

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

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?

推荐答案

模拟鼠标点击

我的猜测是该网页正在侦听 mousedown 而不是 click (这对可访问性不利，因为当用户使用键盘时，只会触发焦点和点击，而不是 mousedown).所以你应该模拟 mousedown、click 和 mouseup(顺便说一下，这是 iPhone、iPod Touch 和 iPad 对点击事件的作用).

要模拟鼠标事件，您可以将此代码段用于支持 DOM 2 事件.为了更简单的模拟，请改用 initMouseEvent 填充鼠标位置.

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

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

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).

在 IE 中，等效的代码段是这样的(由于我没有 IE，因此未验证).我认为您不能为事件处理程序提供鼠标位置.

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

模拟按键和按键

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

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

这意味着您必须(同时结合 HTML5 和 DOM 3 事件 草稿)模拟大量浏览器会做的事情.当我必须这样做时，我讨厌它.例如，这大致是如何模拟输入或文本区域上的按键.

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

我认为在 IE 中模拟关键事件是不可能的.

I don't think it is possible to simulate key events in IE.

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