2013-12-17 3 views
0

복잡한 jquery-html 게임을 만들었고 click 이벤트를 여러 번 사용했습니다. 액세스 할 수 있도록하기 위해 키보드 탐색을해야합니다 ... 모든 jquery 플러그인이나 모든 클릭 이벤트를 입력 키와 함께 사용할 수있는 방법이 있습니까? 예를 들면 :jquery로 키보드 탐색 추가하기

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script> 
    <script> 
    $(document).ready(function(){ 
    $("p").click(function(){ 
     $(this).hide(); 
    }); 
    }); 
    </script> 
    <style>p:focus { 
    outline: 1px solid grey; 
    }</style> 
</head> 
<body> 
    <p tabindex="1">Par1</p> 
    <p tabindex="2">Par2</p> 
</body> 
</html> 

내가 단락에 초점이 맞춰지면 Enter 키를 누릅니다, 그래서 아무것도 내가 키보드 이벤트를 생성하고 키 입력 감지하는 생각 ... 일이 없지만, 매우 지루한 될 경우 ... 모든 솔루션?

답변

4

당신은 당신은 클래스를 추가하는 가상 초점을 사용할 수 있습니다이

$("#target").keydown(function(event) { 
    switch(event.which) 
    { 
    case 37 : //Arrow left 
       break; 
    case 39 : //Arrow left 
       break; 
    case 38 : //Arrow up 
       break; 
    case 40 : //Arrow down 
       break; 
    } 
}); 
+0

그 일을하는 플러그인이 없습니까? 답변 주셔서 감사합니다 :) – RanSch

+0

플러그인이 너무 단순 할 때 무엇을 원하십니까? – sdespont

0

처럼 http://api.jquery.com/keydown/으로 키 이벤트를 잡을 필요가있다. 모든 이벤트 (마우스 또는 키보드)에 적용 할 수 있습니다. 이 키보드 (화살표)와 활성 클래스를 이동

$("#target").keydown(function(event) { 
    switch(event.which) 
    { 
    case 37 : //Arrow left 
       break; 
    case 39 : //Arrow left 
       break; 
    case 38 : //Arrow up 
       break; 
    case 40 : //Arrow down 
       break; 
    case 13 : //Enter 
       break; 
    // next keys.... 

    } 
}); 

http://jsfiddle.net/jirkaz/HA4m3/

작동 및 키 입력으로 활성 사업부에 텍스트를 얻을 수있는 방법을

약간의 영감.

1

는 포인터 디바이스와 관련된 것에 더하여 Document Object Model (DOM) Level 3 Events Specification

에서 클릭 이벤트 유형은 요소의 활성화 이것은 click 이벤트가 소성되는 것을 의미

의 일부로 전달해야 링크가 활성화 된 경우의 예입니다. 따라서 <p tabindex="1">…</p><a href="#" tabindex="1">…</a>으로 대체하고 기본 동작을 방지 할 수 있습니다. 물론 이것이 다른 제안들보다 반드시 간단하지는 않습니다.