javascript - 이벤트 - keyup keydown




JS/jQuery의 keypress/keydown/keyup 이벤트 트리거? (6)

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

나는 실제로 입력 상자에 텍스트를 넣고 싶지 않습니다. 입력 상자에 정보를 입력하는 사용자가 일반적으로 트리거하는 모든 이벤트 처리기 를 트리거하려고합니다. 이는 포커스, 키 다운, 키 누르기, 키 업 및 흐림을 의미합니다. 나는 생각한다.

그러면 어떻게이 일을 성취 할 수 있을까요?


나는 리스너가 jQuery 플러그인 내에서 정의 된 특정 컨텍스트에서, 결국 그 리스너에 의해 잡히는 나에 대한 keypress 이벤트를 성공적으로 시뮬레이트 한 유일한 것이 setTimeout ()을 사용한다는 점에 주목했다. 예

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

$("#txtName").keypress().ready() function 의 끝에 위치했지만 무시 되었습니다. 어쨌든 특정 DOM 보완 내용이 비동기 적으로 생성되지는 않았습니다.


다음과 같은 일정을 파견 할 수 있습니다.

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

다음은 이벤트를 트리거하는 바닐라 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);
    }
}

우선, Sionnach733의 샘플이 완벽하게 작동한다고 말하고 싶습니다 . 일부 사용자는 실제 사례가 없다는 것에 대해 불평합니다. 여기 내 두 센트입니다. 이 사이트를 사용할 때 마우스 클릭 시뮬레이션을하고 있습니다. https://www.youtube.com/tv . 모든 비디오를 열고이 코드를 실행 해보십시오. 다음 비디오로 전환합니다.

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

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 KeyboardEvent


Enter 키 누르기를 트리거하려면 키 코드 특성을 사용하여 @ebynum 응답을 수정해야했습니다.

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






jquery