Comment simuler des pressions de touches ou un clic avec JavaScript ?

Question

J'ai écrit une extension pour Google Chrome et le site sur lequel je veux utiliser mon extension exige que je clique ou que j'utilise la tabulation sur une zone de texte (parce que je pense qu'il exécute la vérification javaScript "onClick" seulement). Je peux obtenir le texte dans la boîte avec mon extension en utilisant :

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

Mais lorsque je clique sur "soumettre", le système pense que je n'ai rien saisi dans la zone de texte "input1", car je n'ai jamais cliqué ou passé la souris dessus.

Quelqu'un peut-il m'aider à contourner ce problème ?

Answer 1

Simulation d'un clic de souris

Je pense que la page Web écoute le clic plutôt que le mousedown (ce qui est mauvais pour l'accessibilité car lorsqu'un utilisateur utilise le clavier, seuls le focus et le clic sont déclenchés, pas le mousedown). Vous devez donc simuler le mousedown, le clic et le mouseup (qui, soit dit en passant, est le symbole de l'accessibilité). ce que font l'iPhone, l'iPod Touch et l'iPad lors d'événements sur écoute ).

Pour simuler les événements de la souris, vous pouvez utiliser ce snippet pour les navigateurs qui supportent Événements DOM 2 . Pour une simulation plus sûre, remplissez la position de la souris à l'aide de la fonction 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 déclenchez un événement de clic simulé, le navigateur déclenche réellement l'action par défaut (par exemple, naviguer vers le lien ou soumettre un formulaire).

Dans IE, l'extrait équivalent est le suivant (non vérifié car je n'ai pas IE). Je ne pense pas que vous puissiez donner au gestionnaire d'événement des positions de souris.

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

Simulation de l'enfoncement et de la pression des touches

Vous pouvez simuler les événements de pression et d'enfoncement des touches, mais malheureusement, dans Chrome, ils ne déclenchent que les gestionnaires d'événements et n'exécutent aucune des actions par défaut. Je pense que c'est parce que le projet de travail sur les événements de DOM 3 décrit ce funky ordre des événements clés :

1. keydown (a souvent une action par défaut comme le déclenchement d'événements click, submit ou textInput)
2. pression sur la touche (si la touche n'est pas une touche modificatrice comme Shift ou Ctrl)
3. (keydown, keypress) avec repeat=true si l'utilisateur maintient le bouton enfoncé
4. actions par défaut des touches !
5. keyup

Cela signifie que vous devez (en passant au peigne fin les HTML5 y Événements DOM 3 brouillons) simulent une grande partie de ce que le navigateur ferait autrement. Je déteste quand je dois faire ça. Par exemple, voici en gros comment simuler une pression de touche sur une entrée ou un 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 soit possible de simuler des événements clés dans IE.

Answer 2

Vous pouvez déclencher l'événement de clic sur un élément en faisant

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

if (element) element.click();

Exemple ici

Answer 3

Ou encore plus court, avec seulement le Javascript moderne standard :

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

El new MouseEvent Le constructeur prend un nom de type d'événement obligatoire, puis un objet facultatif (au moins dans Chrome). Ainsi, vous pouvez, par exemple, définir certaines propriétés de l'événement :

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

Answer 4

Pour simuler les événements clavier dans Chrome :

Il y a un bogue connexe dans webkit qui fait que les événements de clavier lorsqu'ils sont initialisés avec initKeyboardEvent obtiennent un keyCode et un charCode incorrects de 0 : https://bugs.webkit.org/show_bug.cgi?id=16735

Une solution fonctionnelle à ce problème est publiée dans cette réponse SO .

Answer 5

Le focus pourrait être ce que vous recherchez. Avec la tabulation ou le clic, je pense que vous voulez dire donner le focus à l'élément. Le même code que Russ (désolé de l'avoir volé :P) mais en déclenchant un autre événement.

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

if (element) element.focus();