[javascript] JavaScript를 사용하여 Safari에서 키보드 이벤트 실행

Program / 글쓴이

JavaScript를 사용하여 Safari에서 키보드 이벤트를 시뮬레이션하려고합니다.

나는 이것을 시도했다 :

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로 달성하는 것을 선호합니다.)

답변

내가 일하고 DOM 키보드 이벤트 레벨 3 polyfill . 최신 브라우저 또는이 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
});

여기에 예

또한 여기에는 내 polyfill과 별도로 브라우저 간 initKeyboardEvent가 있습니다. (요점)

Polyfill 데모

답변

이벤트를 올바르게 전달 했습니까?

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

답변

이것은 Webkit 의 버그 때문 입니다.

createEvent('Event')대신을 사용하여 Webkit 버그를 해결 createEvent('KeyboardEvent')한 다음 keyCode속성 을 할당 할 수 있습니다. 참조 이 답변 하고 이 예제를 .

답변

모질라 개발자 네트워크는 다음과 같은 설명을 제공합니다 :

  1. 다음을 사용하여 이벤트 만들기 event = document.createEvent("KeyboardEvent")
  2. keyevent 초기화

사용 :

event.initKeyEvent (type, bubbles, cancelable, viewArg,
       ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg,
           keyCodeArg, charCodeArg)
  1. 다음을 사용 하여 이벤트 를 전달합니다.yourElement.dispatchEvent(event)

나는 당신의 코드에서 마지막 것을 보지 못합니다. 아마도 그것이 당신이 놓친 것입니다. 나는 이것이 IE에서도 작동하기를 바랍니다.

답변

나는 이것에별로 좋지 않지만 KeyboardEvent=> KeyboardEvent
is initialized with 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" />

스 니펫 확장

답변