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.