Gmail과 같은 단축키 구현 방법

웹 응용 프로그램에 단축키를 구현하고 싶습니다. 지금까지 나는 jquery.hotkeys plugin을 사용해 왔으며 간단한 단축키 (예 : 과 같은 단일 키 입력)를 구현할 수있었습니다. 이제 Gmail과 같은 단축키 구현 방법

키보드를 통해 좀 더 복잡한 탐색을 지원하기 위해, 나는 (여기서 그램을 눌러 예를 들어 내가 다음 ('이동'에 대한) Gmail과 같은 '멀티 키'단축키를 구현하고 싶습니다 '받은 편지함'의 경우)받은 편지함으로 이동합니다.

누구든지 해당 작업에 대한 javascript 구성 요소 (jquery 플러그인 또는 유사)를 알고 있습니까? 또는 그러한 단축키를 구현하는 좋은 접근 방법은 무엇입니까?

출처

2012-02-23 M4N

keymaster-sequence 플러그인을 사용하여 keymaster을 사용하면 더 좋은 해결책이 있습니다. 여기

<script type="text/javascript" src="https://raw.github.com/madrobby/keymaster/master/keymaster.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/chevalric/keymaster-sequence/master/keymaster.sequence.min.js"></script> 
<script> 
key.sequence(["g","i"], function() { 
    var el = document.getElementById("result"); 
    el.innerHTML = "You first pressed 'g', then you pressed 'i'"; 
}); 

</script> 
<div id="result"></div>

도 충돌이

출처

2013-03-21 23:38:49 ocodo

샘플을 raw.github.com의 src 링크에서 실행하면 더 이상 작동하지 않습니다. 그러나 연결된 github 프로젝트는 지역 코드와 함께 작동합니다. – Nate

링크가 정상적으로 해결됩니다. - 그러나 데모 목적으로 만 포함되며 ** CDN으로 사용해서는 안됩니다 **. – ocodo

어쩌면 나는 그것을 망쳐 놨지 만, 내 애플 리케이션에 정확하게 복사하고 붙여 넣었을 때 작동하지 않았다. 콘텐츠를 로컬 파일에 복사했을 때 잘 동작했다. – Nate

g을 누르면 전역 부울 값이 설정됩니다. 그런 다음 을 눌렀을 때 설정되어 있는지 확인하십시오. g 프레스에서 시간 제한을 구현하여 나중에 제한 시간이 이되도록 선택적으로 구현할 수 있습니다.

var goPressed = false; 
function hotkeyPressed (event) { 
    if (event.keyCode == KEYCODE_FOR_G) { 
     goPressed == true; 
     //Optionally: 
     setTimeout(clearPresses, 3000); 
    } 
    if (event.keyCode == KEYCODE_FOR_I && goPressed) { 
     gotoInbox(); 
    } 
} 

function clearPresses() { 
    goPressed = false; 
}

출처

2012-02-23 15:32:05

쉽지 않습니다. 유효한 단축키를 만들기 위해 정의 시간 내에 두 개의 키를 눌러야합니다. – M4N

그건 내 clearPresses 기능입니다 ... 3000 밀리 초 이내에 i를 누르지 않으면 부울이 다시 false로 설정됩니다. –

키 누를 때 3 초가 매우 길다. – ocodo

Matt Fellows과 마찬가지로 상태 및 제한 시간을 추가하여 플러그인을 사용할 수 있습니다.

var gWasPressed = false;  

var clearKeyState = function() { 
    gWasPressed = false; 
} 

var changeKeyState = function() { 
    gWasPressed = true; 
    setTimeout(clearKeyState, 3000); 
} 

$(document).bind('keydown', 'g', changeKeyState); 
$(document).bind('keydown', 'i', commandI); 

var commandI = function() { 
    if (gWasPressed) { 
    // go to inbox 
    clearKeyState(); 
    } else { 
    // do whatever i was supposed to do if g wasn't pressed 
    } 
}

다른 용액 그램 누를 때 키를 다시 바인딩 수 및 2 차 키 I 누르면 타임 아웃이 만료 될 때 또는 그 바인딩을 해제한다.

출처

2012-02-23 16:01:13 Spoike

(g뿐만 아니라 g i 바인딩) 취급 표시하는 작은 데모 http://jsfiddle.net/Nwdyd/1/입니다 :

소스는 keymaster.sequence.js

이처럼 사용 여기 keymaster.js 및 위치 jQuery의 1.10+ 버전에서 작동하는 새로운 버전의 hotKeys.js가 있습니다. 작고 100 줄짜리 자바 스크립트 파일입니다. 4kb 또는 다만 2kb는 minified. https://github.com/realdanielbyrne/HoyKeys.git를하거나 github에의 REPO 페이지 https://github.com/realdanielbyrne/HoyKeys 또는 포크와 기여로 이동 : GitHub의에서

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething); 

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse); 

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function() { 
     doSomethingWithaParameter('Daniel'); 
    }); 

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool);

복제하려면 REPO : 여기에 몇 가지 간단한 사용 예입니다된다.

출처

2014-03-07 16:15:09 realdanielbyrne

Gmail과 같은 단축키 구현 방법

답변

관련 문제