Comment faire pour simuler des frappes de touche ou un clic avec le JavaScript?

Simuler un clic de souris

Ma conjecture est que la page web est à l'écoute de mousedown plutôt que de la souris (ce qui est mauvais pour l'accessibilité parce que lorsqu'un utilisateur utilise le clavier, se concentrer uniquement et cliquez sur sont licenciés, pas mousedown). Donc, vous devez simuler mousedown, cliquez, et mouseup (qui, en passant, est ce que l'iPhone, l'iPod Touch et l'iPad n'sur appuyez sur événements).

Pour simuler les événements de souris, vous pouvez utiliser ce modèle pour les navigateurs qui prennent en charge DOM 2 Événements. Pour une plus infaillible de simulation, de remplir la position de la souris à l'aide de initMouseEvent à la place.

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

Lorsque vous lancez une simulation, cliquez sur l'événement, le navigateur fait feu de l'action par défaut (par exemple, accédez au lien de href, ou soumettre un formulaire).

Dans IE, l'équivalent extrait de cette (non vérifiées puisque je n'ai pas IE). Je ne pense pas que vous pouvez donner le gestionnaire d'événement de la souris positions.

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

Simulant keydown et keypress

Vous pouvez simuler keydown et événements de pression de touche, mais, malheureusement, en Chrome-ils seulement le feu les gestionnaires d'événements et de ne pas effectuer les actions par défaut. Je pense que c'est parce que le DOM 3 Événements, document de travail décrit cette funky l'ordre des événements clés:

1. keydown (souvent a défaut d'action comme le feu sur, de soumettre, ou textInput événements)
2. keypress (si la clé n'est pas juste une touche de modification, comme Shift ou Ctrl)
3. (keydown, keypress) avec la répétition=true si l'utilisateur maintient le bouton enfoncé
4. actions par défaut de keydown!!
5. keyup

Cela signifie que vous devez (bien que peignage de la HTML5 et DOM 3 Événements brouillons) simuler une grande quantité de ce que le navigateur ne le feraient autrement. Je déteste quand je dois le faire. Par exemple, c'est à peu près comment simuler une pression sur une touche sur un input ou 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, '');

Je ne pense pas qu'il est possible de simuler des événements clés dans IE.

Ou même plus courte, avec seulement la norme moderne Javascript:

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

La new MouseEvent constructeur prend une manifestation de type nom, puis un objet facultatif (au moins dans Chrome). Afin de vous pourriez, par exemple, de définir certaines propriétés de l'événement:

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

L'accent pourrait être ce que vous cherchez. Avec la tabulation ou en cliquant sur je pense que u veux dire de donner à l'élément le focus. Même code que Russ (Désolé, je l'ai volé :P), mais le tir d'un autre événement.

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