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

问题描述

我写了一个谷歌浏览器扩展程序，我想要使用我的扩展程序的网站要求我点击或标签到文本框（因为我认为它只运行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?

推荐答案

模拟a鼠标点击

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

要模拟鼠标事件，您可以将此片段用于支持的浏览器 DOM 2 Events 。要获得更加简单的模拟，请使用 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和按键

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

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


2. 按键（如果键不只是一个修改键，如Shift或Ctrl）


3. （keydown，keypress），其中repeat = true如果用户按下按钮


4. keydown的默认操作!!


5. keyup

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

这意味着你必须（在梳理 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屋！