JS / jQuery에서 키 누르기 / 키 다운 / 키업 이벤트를 트리거 하시겠습니까?

JS / jQuery에서 키 누르기 / 키 다운 / 키업 이벤트를 트리거 하시겠습니까?

---

JS 및 / 또는 jQuery의 텍스트 입력 상자에 텍스트를 입력하는 사용자를 시뮬레이션하는 가장 좋은 방법은 무엇입니까?

나는 하지 않습니다 난 그냥 모든 이벤트 트리거 할, 실제로 입력 상자에 텍스트를 넣어 원하는 핸들러 일반적으로 입력 상자에 사용자 입력 정보에 의해 트리거 얻을 것입니다. 이는 초점, 키 다운, 키 누르기, 키업 및 흐림을 의미합니다. 내 생각에

그렇다면 어떻게 이것을 달성 할 수 있을까요?

---

다음과 같이 직접 호출하여 이벤트를 트리거 할 수 있습니다.

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

그것이 당신이하려는 일을합니까?

또한 아마도 트리거 .focus()하고 잠재적으로.change()

특정 키를 사용하여 키 이벤트를 트리거하려면 다음과 같이하십시오.

$(function() {
    var e = $.Event('keypress');
    e.which = 65; // Character 'A'
    $('item').trigger(e);
});

여기에 키 누르기 이벤트에 대한 흥미로운 토론이 있습니다. jQuery 이벤트 키 누르기 : 어떤 키를 눌렀습니까? .which 속성과의 브라우저 간 호환성에 관한 내용입니다.

---

다음과 같은 이벤트를 전달할 수 있습니다.

el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

---

enter키 누르기 를 트리거 하기 위해 특히 keyCode 속성을 사용하여 @ebynum 응답을 수정해야했습니다.

e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);

---

다음은 모든 이벤트를 트리거하는 바닐라 js 예제입니다.

function triggerEvent(el, type){
if ('createEvent' in document) {
        // modern browsers, IE9+
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

---

이제 할 수 있습니다 :

var e = $.Event("keydown", {keyCode: 64});

---

다음을 사용 EventTarget.dispatchEvent(event)하여 새 KeyboardEvent를 이벤트로 전달하면됩니다.

예를 들면 다음과 같습니다. element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

작업 예 :

// get the element in question
const input = document.getElementsByTagName("input")[0];

// focus on the input element
input.focus();

// add event listeners to the input element
input.addEventListener('keypress', (event) => {
  console.log("You have pressed key: ", event.key);
});

input.addEventListener('keydown', (event) => {
  console.log(`key: ${event.key} has been pressed down`);
});

input.addEventListener('keyup', (event) => {
  console.log(`key: ${event.key} has been released`);
});

// dispatch keyboard events
input.dispatchEvent(new KeyboardEvent('keypress',  {'key':'h'}));
input.dispatchEvent(new KeyboardEvent('keydown',  {'key':'e'}));
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));

<input type="text" placeholder="foo" />

MDN dispatchEvent

MDN 키보드 이벤트

---

First of all, I need to say that sample from Sionnach733 worked flawlessly. Some users complain about absent of actual examples. Here is my two cents. I've been working on mouse click simulation when using this site: https://www.youtube.com/tv. You can open any video and try run this code. It performs switch to next video.

function triggerEvent(el, type, keyCode) {
    if ('createEvent' in document) {
            // modern browsers, IE9+
            var e = document.createEvent('HTMLEvents');
            e.keyCode = keyCode;
            e.initEvent(type, false, true);
            el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.keyCode = keyCode;
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

var nextButton = document.getElementsByClassName('icon-player-next')[0];
triggerEvent(nextButton, 'keyup', 13); // simulate mouse/enter key press

---

I thought I would draw your attention that in the specific context where a listener was defined within a jQuery plugin, then the only thing that successfully simulated the keypress event for me, eventually caught by that listener, was to use setTimeout(). e.g.

setTimeout(function() { $("#txtName").keypress() } , 1000);

Any use of $("#txtName").keypress() was ignored, although placed at the end of the .ready() function. No particular DOM supplement was being created asynchronously anyway.

---

For typescript cast to KeyboardEventInit and provide the correct keyCode integer

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);

참고URL : https://stackoverflow.com/questions/3368578/trigger-a-keypress-keydown-keyup-event-in-js-jquery