jQuery로 키 누르기 시뮬레이션


79

jQuery를 사용하여 링크를 클릭 할 때 KeyPress를 어떻게 시뮬레이션 (트리거?) 할 수 있습니까? 예를 들어 사용자가 다음 링크를 클릭하는 경우 :

<a id="clickforspace" href="#">Click Here</a>

그런 다음 링크를 클릭하면 마치 키보드에서 "스페이스 바"를 누르는 것과 같습니다.

이와 같은 것으로 가정합니다.

$("#clickforspace").click(function(e) { 
    e.preventDefault(); 
    //... Some type of code here to initiate "spacebar" //
                                      });

이것을 달성하는 방법에 대한 아이디어가 있습니까?


2
이것은 귀하의 질문에 답할 수 있습니다.
— themis

궁금합니다. click스페이스 바로 바꾸려고 할 때 실제로 브라우저가 페이지에서 아래로 스크롤하기를 원했습니까? 링크에서 스페이스 바를 누르는 것은 일반적으로 page down 키를 누르는 것과 동일한 효과를 갖습니다.
— Joel Purra 2012

답변:


15

jQuery의 키 누르기 이벤트는 이러한 종류의 작업을 수행하기위한 것입니다. .trigger ()에 문자열 "keypress"를 전달하여 이벤트를 트리거 할 수 있습니다. 그러나 좀 더 구체적으로 말하자면 실제로 jQuery.Event 객체 (유형을 "keypress"로 지정)를 전달하고 스페이스 바가되는 키 코드와 같은 원하는 속성을 제공 할 수 있습니다.

http://docs.jquery.com/Events/trigger#eventdata

자세한 내용은 위의 문서를 읽으십시오.


54
물론 문서를 읽으십시오.하지만 포스터는 이미 그것을 알고있을 것입니다. jQuery 이벤트 문서는 약간 불투명합니다. Andrew Culver는 직접적인 답변과 추가 정보에 대한 참고 자료를 제공했습니다.
— Roy Leban

142

나는 이것이 당신이 찾고있는 것이라고 믿습니다.

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 40;
$("whatever").trigger(press);

에서 여기 .


17
예를 들어 입력 컨트롤과 함께 사용하면 실제 텍스트가 생성되지 않습니다.
— Alex Burtsev 2013

5
@AlexBurtsev-맞습니다. 이것은 특정 키를 눌렀을 때처럼 이벤트 핸들러 만 트리거하지만 키보드에서 키를 눌렀을 때 발생하는 것과 같은 키를 실제로 누르지는 않기 때문입니다 (아마 보안상의 이유로)
— BornToCode

6
'$'와 'jQuery'를 섞은 이유가 있습니까?
— 대니 앤드류스

4
당신이 쓴 것은 Chrome의 jQuery 2.2.3에서 작동하지 않았습니다. :( 그러나 이것은했다 :$("whatever").trigger($.Event("keydown", {keyCode: 40}))
— 조나단 벤

1
Jonathan Benn의 방법을 기반으로하여 키 코드를 보내는 대신 동일한 기술을 사용하여 키를 보낼 수도 있습니다 (키코 드는 사용되지 않음으로 표시되기 때문). 예를 들어 : $ ( "whatever"). trigger ($. Event ( "keyup", {key : "Enter"})) — 그리고 선택적으로 다른 키보드 이벤트와 함께 표시됩니다.
— Alan M.


12

이 SendKeys jQuery 플러그인을 사용해 볼 수 있습니다.

http://bililite.com/blog/2011/01/23/improved-sendkeys/

$(element).sendkeys(string)입력, 텍스트 영역 또는 contenteditable = true 인 기타 요소의 삽입 지점에 문자열을 삽입합니다. 삽입 지점이 현재 요소에 없으면 sendkeys가 마지막으로 호출되었을 때 삽입 지점이 어디에 있었는지 기억합니다 (삽입 지점이 요소에없는 경우 끝에 추가됨).


당신은 jQuery를, 당신은 단지 얻어서 동일한 기능을 사용할 수 있습니다이를 사용할 필요가 없습니다 bililiteRange라이브러리 : github.com/dwachss/bililiteRange을 (사실, jQuery 플러그인 자체에 서이 놀라운 도서관 주변 단지 얇은 래퍼입니다 ).
— fiatjaf 2014 년

5

이것은 작동합니다 :

var event = jQuery.Event('keypress');
event.which = 13; 
event.keyCode = 13; //keycode to trigger this for simulating enter
jQuery(this).trigger(event); 

1
[var event = jQuery.Event ( 'keypress'); event.which = 13; event.keyCode = 13; jQuery를 (이) .trigger (이벤트)이 시도
— Anoop PS

내가 대체 여기 그래서 조각으로, 대화 상자에서 입력을 클릭하기 위해 필요한 이 함께 #myEl .. 감사합니다
— 진 보
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.