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

다음을 사용 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 키보드 이벤트

이제 할 수 있습니다 :

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

우선, 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

jQuery 플러그인 내에 리스너가 정의 된 특정 컨텍스트에서 키 리스너 이벤트를 성공적으로 시뮬레이트 한 유일한 것은 결국 해당 리스너가 잡은 유일한 것은 setTimeout ()을 사용하는 것입니다. 예 :

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

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

TypeScript를 KeyboardEventInit로 캐스트하고 올바른 keyCode 정수를 제공하십시오.

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