jQuery로 키 누르기 이벤트를 트리거하는 확실한 방법


260

이 질문에 대한 모든 답변을 읽었으며 해결책이 효과가없는 것 같습니다.

또한 특수 문자로 키 누르기를 트리거해도 전혀 작동하지 않는 느낌이 들었습니다. 누가이 작업을 수행했는지 확인할 수 있습니까?


14
아니, 당신은 개념을 이해 그리워. 이것은 작동하는 방식이 아닙니다. 트리거는 이벤트 핸들러 만 호출합니다. 실제로 키를 인쇄하지는 않습니다. 키 인쇄 효과를 시뮬레이션하려면 입력 값에 키를 추가하고 동시에 이벤트를 트리거하십시오.
Nadia Alramli

흥미 롭습니다. 이 경우 이벤트를 트리거하면 jquery가 아닌 라이브러리에 대해서도 이벤트가 트리거되는지 알 수 있습니다. 예를 들어 일반 JS에 onKeydown을 설정하면 "가짜"이벤트가 캡처됩니까?
mkoryak

2
예, onkeydown = '...'이 있으면 일반 js로 설정됩니다. 가짜 이벤트에 의해 트리거됩니다. 나는 확실하지 않았다. 그러나 나는 빠른 테스트를했고 효과가있었습니다.
Nadia Alramli

2
@Nadia 감사합니다! 내 기대가 잘못되었다는 것을 깨닫기 전에 왜 작동하지 않는지 궁금해하는 모든 답변을 읽었습니다. 다른 많은 사람들도 같은 오해를 겪게 될 것 같습니다.
mikemaccana 2012 년

3
2 년 후 ... 페이지를 읽는 것이 확실한 방법은 다음과 같습니다. $ ( 'input # search'). trigger ($. Event ( 'keydown', {which : $. ui.keyCode.ENTER, keyCode : $ .ui.keyCode.ENTER}));
molokoloco

답변:


365

키 누르기 또는 키 다운 이벤트를 트리거하려면 다음을 수행하십시오.

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);

42
문제는 캡처하는 방법이 아니라 트리거하는 방법입니다
Chad Grant

2
이벤트를 트리거하는 예제를 추가했습니다
Nadia Alramli

4
아주 좋은 대답입니다. jQuery.Event가 jQuery 1.3 이상에서 사용 가능하다는 점은 주목할 가치가 있습니다. 그것은이 질문에 관련되었다 : stackoverflow.com/questions/1823617/...
artlung

8
이것은 jQuery UI 슬라이더로 작동하지 않았습니다. 아래의 OreiA의 답변과 같이 e.keyCode를 설정해야했습니다.
crizCraig

2
FWIW, 난 내 응용 프로그램 '의 keyup'더 성공했다
마크

81

jQuery 1.6 이상으로 조금 더 간결 해졌습니다 .

var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } );

$('input').trigger(e);

(jQuery UI를 사용하지 않는 경우 적절한 키 코드를 대신 사용하십시오.)


4
'keyCode'를 'which'로 대체하는 것을 잊지 마십시오.
Richard Nienaber

예, 어떤 코드와 키 코드가 안전한지 정의해야합니다 (이벤트 리스너가 e.keyCode를 확인하는 경우 jQuery.Event 객체를 생성 할 때 keyCode를 정의한 경우에만 작동 함)
jackocnr

1
jQuery는 어느 / keyCode를 정규화하므로 둘 중 하나를 둘 수 있습니다.
나이젤 엔젤

api.jquery.com에 대한 링크는 +1; 현재 jQuery 버전은 어떤 / 키 코드를 정규화하지 않으므로 안전을 위해 두 가지를 모두 제공해야합니다
Victor

2
@SamuelLindblom 더 명확하게 작성해야합니다 .jQuery는를 통해 전달되는 이벤트 속성을 정규화하지 않습니다 .trigger(jQuery.Event('name', props)). jsfiddle.net/9ggmrbpd/1 예제를 참조하십시오. 트리거 된 이벤트의 특성은 그대로 전달됩니다. 소스 코드 : github.com/jquery/jquery/blob/master/src/event.js#L739
Victor

68

실제 답변에는 keyCode가 포함되어야합니다.

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
e.keyCode = 50
$("input").trigger(e);

jQuery의 웹 사이트에 어떤 키 코드가 정규화되어 있다고 말하더라도 잘못 잘못 판단됩니다. e.which 및 e.keyCode에 대한 표준 크로스 브라우저 검사를 수행하는 것이 항상 가장 안전하며이 경우에는 둘 다 정의하십시오.


34
+1. 그건 그렇고, e.keyCode = e.which = 50;한 줄로 더 좋을 것입니다. :)
Sk8erPeter

방금 사용하는 keyCode것이 효과가 없다는 것을 알았습니다 . 모두를 설정했다하면을 작동하도록
Tasos K.

@ Sk8erPeter 그것은 골프 코딩 경쟁이
아니라면 안됩니다

18

jQuery UI도 사용하는 경우 다음과 같이 할 수 있습니다.

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);

1
e. jQuery UI 슬라이더에서 작동하지 않는 것 같습니다. 이 답변에 감사드립니다. 작동합니다.
crizCraig

5

나는 키 업과 함께 작동하게했다.

$("#id input").trigger('keyup');

3
6 년 전 제 질문에 키 코드를 설정하고 싶었지만 방법을 몰랐습니다.
mkoryak

4

좋아, 이것으로 작동하는 나를 위해 ...

var e2key = function(e) {
    if (!e) return '';
    var event2key = {
        '96':'0', '97':'1', '98':'2', '99':'3', '100':'4', '101':'5', '102':'6', '103':'7', '104':'8', '105':'9', // Chiffres clavier num
        '48':'m0', '49':'m1', '50':'m2', '51':'m3', '52':'m4', '53':'m5', '54':'m6', '55':'m7', '56':'m8', '57':'m9', // Chiffres caracteres speciaux
        '65':'a', '66':'b', '67':'c', '68':'d', '69':'e', '70':'f', '71':'g', '72':'h', '73':'i', '74':'j', '75':'k', '76':'l', '77':'m', '78':'n', '79':'o', '80':'p', '81':'q', '82':'r', '83':'s', '84':'t', '85':'u', '86':'v', '87':'w', '88':'x', '89':'y', '90':'z', // Alphabet
        '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown' // KEYCODES
    };
    return event2key[(e.which || e.keyCode)];
};

var page5Key = function(e, customKey) {
    if (e) e.preventDefault();
    switch(e2key(customKey || e)) {
        case 'left': /*...*/ break;
        case 'right': /*...*/ break;
    }
};

$(document).bind('keyup', page5Key);

$(document).trigger('keyup', [{preventDefault:function(){},keyCode:37}]); 

2

현재 커서와 텍스트 선택을 고려해야하는 경우 ...

Chrome의 AngularJS 앱에서는 작동하지 않았습니다. Nadia가 원래 의견에서 지적했듯이 문자는 입력 필드에 표시되지 않습니다 (적어도 내 경험이었습니다). 또한 이전 솔루션에서는 입력 필드의 현재 텍스트 선택 사항을 고려하지 않았습니다. 멋진 라이브러리 jquery-selection 을 사용해야했습니다 .

여러 입력 필드를 채우는 사용자 정의 온 스크린 숫자 키패드가 있습니다. 나는 ...

  1. 초점에 lastFocus.element를 저장하십시오.
  2. 흐림시 현재 텍스트 선택 저장 (시작 및 중지)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. 내 키패드의 버튼을 누르면 :

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})


1

console.log( String.fromCharCode(event.charCode) );

내가 추측 문자를 매핑 할 필요가 없습니다.


1

문서 처럼 달성 할 수 있습니다

$('input').trigger("keydown", {which: 50});

1
이것은 이벤트 인수 내부에 아무것도 설정하지 않지만 여분의 인수를 이벤트 핸들러 콜백에 추가하는 extraParameters 인수를 사용하기 때문에 작동하지 않는 것 같습니다.
TimeWaster

1
유효한 해결책이 아닙니다
Entwickler
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.