Запуск события клавиатуры в Safari с использованием JavaScript

79

Я пытаюсь смоделировать событие клавиатуры в Safari с помощью JavaScript.

Я пробовал это:

var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 115, 0);

... а также это:

var event = document.createEvent("UIEvents");
event.initUIEvent("keypress", true, true, window, 1);
event.keyCode = 115;

Однако, попробовав оба подхода, у меня возникла та же проблема: после выполнения кода свойства keyCode/ whichобъекта события устанавливаются на 0, а не 115.

Кто-нибудь знает, как надежно создать и отправить событие клавиатуры в Safari? (Я бы предпочел добиться этого на простом JavaScript, если это возможно.)

Стив Харрисон
источник
Вы пытаетесь выполнить определенный код или какую-то комбинацию клавиш, понятную браузеру? Если это ваш собственный код, возможно, лучше всего настроить оболочку событий, которую вы можете вызывать либо через «настоящий» интерфейс клавиатуры, либо через какой-либо другой генератор событий, как вы описали здесь. Рефакторинг по мере необходимости.
Nolte,
1
В этом примере я пытаюсь имитировать нажатие пользователем клавиши «s». В конечном счете, я пытаюсь имитировать нажатие пользователем Command-R в виджете Apple Dashboard.
Стив Харрисон,
2
Ваш код решил мою проблему :)
@ acidzombie24: С удовольствием! :)
Стив Харрисон
4
Дубликат имитации ключевых событий JavaScript
Дэн Даскалеску

Ответы:

43

Я работаю над полифилом уровня 3 событий клавиатуры DOM . В последних версиях браузеров или с помощью этого полифилла вы можете сделать что-то вроде этого:

element.addEventListener("keydown", function(e){ console.log(e.key, e.char, e.keyCode) })

var e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, key : "Q", char : "Q", shiftKey : true});
element.dispatchEvent(e);

//If you need legacy property "keyCode"
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
delete e.keyCode;
Object.defineProperty(e, "keyCode", {"value" : 666})

ОБНОВИТЬ:

Теперь мой полифилл поддерживает устаревшие свойства keyCode, charCode и which.

var e = new KeyboardEvent("keydown", {
    bubbles : true,
    cancelable : true,
    char : "Q",
    key : "q",
    shiftKey : true,
    keyCode : 81
});

Примеры здесь

Кроме того, здесь есть кроссбраузерный initKeyboardEvent отдельно от моего полифилла: (суть)

Демо- версия полифилла

Терми
источник
Кажется, не работает прокрутка прокручиваемой области вниз с помощью стрелок или клавиш вверх / вниз ...
Майкл
Изменен ваш jsfiddle для отправки события в текстовое поле вместо документа @ jsfiddle.net/vnathalye/yjc5F/974 . Хотя он запускает обработчик нажатия клавиш, текст не отображается в текстовом поле. Есть идеи?
Vivek Athalye
1
@termi Твоя демо-ссылка мертва
Себастьян
Кажется, не работает и для изменения значения элемента ввода (текста).
Майкл
Операнд оператора удаления не может быть свойством только для чтения.
nircraft
30

Правильно ли вы отправили событие?

function simulateKeyEvent(character) {
  var evt = document.createEvent("KeyboardEvent");
  (evt.initKeyEvent || evt.initKeyboardEvent)("keypress", true, true, window,
                    0, 0, 0, 0,
                    0, character.charCodeAt(0)) 
  var canceled = !body.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

Если вы используете jQuery, вы можете:

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}
Tyronegcarter
источник
3
Можно ли имитировать control + C (ярлык для копирования) с помощью этого?
Джон Джон Пихлер
1
@claudiopro Да, вы правы, так и должно быть(evt.initKeyEvent || evt.initKeyboardEvent).call(evt, // etc.
tyronegcarter
12
InitKeyboardEvent также не работает в Chromium. event.keyCodeи event.whichвсегда возвращать 0. Это известная ошибка, и обходной путь - использовать обычное событиеvar event = document.createEvent('Event'); event.initEvent('keydown', true, true); event.keyCode = 76;
lluft 06
5
Downvoted : initKeyEventи initKeyboardEventявляются DEPRECATED .
Константин Ван
2
@ K._ вместо того, чтобы голосовать против ранее работающего ответа, заявив, что он устарел, должно быть достаточно, чтобы предупредить всех без негативного воздействия на tyronegcarter. В этом ответе stackoverflow.com/questions/961532/… используется современный KeyboardEvent developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…
bit-less
8

Сеть разработчиков Mozilla предоставляет следующее объяснение:

  1. Создать мероприятие, используя event = document.createEvent("KeyboardEvent")
  2. Запуск ключевого события

с помощью:

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
       ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
           keyCodeArg, charCodeArg)
  1. Отправьте событие, используяyourElement.dispatchEvent(event)

Я не вижу последнего в вашем коде, возможно, это то, что вам не хватает. Надеюсь, это работает и в IE ...

Javache
источник
2
К сожалению, реализация Mozilla нестандартна. Что касается пункта 3, моя проблема заключается в создании правильного события - после этого происходит отправка события. Кроме того, поскольку я разрабатываю для Apple Dashboard, мне совсем не нужно беспокоиться об IE! (Whoopee!)
Стив Харрисон
5
.initKeyEventустарела
Hampus Ahlgren
1

Я не очень хорошо разбираюсь в этом, но KeyboardEvent=> см. KeyboardEvent инициализируется с помощью initKeyEvent.
Вот пример генерации события на <input type="text" />элементе

document.getElementById("txbox").addEventListener("keypress", function(e) {
  alert("Event " + e.type + " emitted!\nKey / Char Code: " + e.keyCode + " / " + e.charCode);
}, false);

document.getElementById("btn").addEventListener("click", function(e) {
  var doc = document.getElementById("txbox");
  var kEvent = document.createEvent("KeyboardEvent");
  kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74);
  doc.dispatchEvent(kEvent);
}, false);
<input id="txbox" type="text" value="" />
<input id="btn" type="button" value="CLICK TO EMIT KEYPRESS ON TEXTBOX" />

Вутар
источник
7
это видно js:21TypeError: kEvent.initKeyEvent is not a function. (In 'kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74)', 'kEvent.initKeyEvent' is undefined)на сафари :(
Хе Ифэй 何 一 非
Это должно быть: var kEvent = document.createEvent ("KeyboardEvent"); kEvent.initKeyboardEvent ("нажатие клавиши", истина, истина, ноль, ложь, ложь, ложь, ложь, 74, 74); document.dispatchEvent (kEvent);
Любопытный 03