it-swarm.com.ru

Запуск события клавиатуры в JavaScript

Я пытаюсь смоделировать событие клавиатуры в 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, если это возможно.)

68
Steve Harrison

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

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})

Обновление:

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

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

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

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

Polyfill демо

32
termi

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

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) });
}
28
tyronegcarter

Это связано с ошибка в Webkit.

Вы можете обойти ошибку Webkit, используя createEvent('Event') вместо createEvent('KeyboardEvent'), а затем назначив свойство keyCode. Смотрите этот ответ и этот пример .

15
John

Mozilla Developer Network дает следующее объяснение:

  1. Создать событие, используя event = document.createEvent("KeyboardEvent")
  2. Инициация

с помощью:

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

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

8
Javache

Я не очень хорош в этом, но 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" />
1
vutar