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 Event Keypress: 어떤 키를 눌렀습니까?특히 브라우저와 .which 속성과의 호환성에 관한 것입니다.

다음과 같은 이벤트를 보낼 수 있습니다.

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

키 프레스를 트리거하려면 keyCode 속성을 사용하여 @ebynum 응답을 수정해야 했습니다.

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

다음은 이벤트를 트리거하는 vanilla j의 예입니다.

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 디스패치 이벤트

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

KeyboardEvent에 캐스팅된 타이프스크립트용초기화하고 올바른 keyCode 정수를 입력합니다.

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

jQuery 플러그인 내에서 청취자가 정의되어 있는 특정 컨텍스트에서 키 누르기 이벤트를 성공적으로 시뮬레이트할 수 있었던 유일한 방법은 setTimeout()을 사용하는 것이었습니다.

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

의 임의의 사용$("#txtName").keypress()무시당했습니다만,.ready() function어쨌든 비동기식으로 작성된 DOM 보완은 없었습니다.

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