Как имитировать нажатия клавиш или щелчок с помощью JavaScript?

Я написал расширение Google Chrome и сайт, на котором я хочу использовать расширение, требуя от меня щелкнуть или вставить вкладку в текстовое поле (потому что я думаю, что он запускает проверку Java-кода «onClick»). Я могу получить текст в поле с моим расширением, используя:

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

Но когда я нажимаю кнопку «Отправить», он думает, что я ничего не вводил в текстовое поле «input1», потому что я никогда не щелкал его или не накладывал на него.

Может ли кто-нибудь помочь мне обойти это?

Имитация щелчка мыши

Я предполагаю, что веб-страница прислушивается к mousedown, а не клику (что плохо для доступности, потому что, когда пользователь использует клавиатуру, только фокус и щелчок стреляют, а не mousedown). Таким образом, вы должны моделировать mousedown, click и mouseup (что, кстати, является тем, что iPhone, iPod Touch и iPad делают на событиях крана ).

Чтобы имитировать события мыши, вы можете использовать этот fragment для браузеров, поддерживающих события DOM 2 . Для более initMouseEvent вместо этого наведите курсор мыши на позицию 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); 

Когда вы запускаете имитированное событие click, браузер фактически запускает действие по умолчанию (например, перейдите к href ссылки или отправьте форму).

В IE эквивалентный fragment – это (непроверенный, поскольку у меня нет IE). Я не думаю, что вы можете назначить позиции мыши обработчикам событий.

 // 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. keypress (если ключ не является только ключом модификатора, например Shift или Ctrl)
  3. (keydown, keypress) с повторением = true, если пользователь удерживает кнопку
  4. по умолчанию действия keydown !!
  5. KeyUp

Это означает, что вы должны (при расчесывании проектов HTML5 и DOM 3 Events ) имитировать большое количество того, что в противном случае сделал бы браузер. Я ненавижу это, когда я должен это делать. Например, это примерно то, как имитировать нажатие клавиши на вход или текстовое поле.

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

вы можете поднять событие click на элементе, выполнив

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

Пример здесь

Или даже короче, с только стандартным современным Javascript:

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

new MouseEvent конструктор new MouseEvent принимает имя типа события, а затем необязательный объект (по крайней мере, в Chrome). Таким образом, вы могли бы, например, установить некоторые свойства события:

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

Для имитации событий клавиатуры в Chrome:

В webkit есть связанная ошибка в том, что события клавиатуры при инициализации initKeyboardEvent получают неверный keyCode и charCode 0: https://bugs.webkit.org/show_bug.cgi?id=16735

Рабочее решение для него опубликовано в этом SO-ответе .

Фокус может быть тем, что вы ищете. С табулированием или щелчком я думаю, что у означает дать элементу фокус. Тот же код, что и Russ (Извините, я украл его: P), но уволил другое событие.

 // this must be done after input1 exists in the DOM var element = document.getElementById("input1"); if (element) element.focus(); 
  • jQuery .load () не работает в Chrome
  • Как получить URL-адреса открытых страниц из Chrome и Firefox?
  • Как сделать элемент выбора прозрачным в Chrome?
  • Chrome getUserMedia не запрашивает разрешения на локальном уровне
  • Как сделать панель инструментов в Google Chrome?
  • Google Chrome перенаправляет localhost на https
  • XMLHttpRequest не может загрузить файл. Запросы на кросс-начало поддерживаются только для HTTP
  • Как заставить Chrome разрешить смешанный контент?
  • Поскольку v38, расширение Chrome больше не может загружаться с URL-адресов HTTP, обходной путь?
  • Запретить API-интерфейс chrome.notifications скрывать мое уведомление через несколько секунд
  • Android Chrome игнорирует -webkit-text-size-adjust: none свойство. При масштабировании текст масштабируется
  • Давайте будем гением компьютера.