Program Tip

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

programtip 2020. 10. 27. 23:07
반응형

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


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에서도 작동하기를 바랍니다.


I am not very good with this but KeyboardEvent => see KeyboardEvent is initialized with initKeyEvent .
Here is an example for emitting event on <input type="text" /> element

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

참고URL : https://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-safari-using-javascript

반응형