Cách triển khai các phím nóng giống như gmail

Question

Tôi muốn triển khai các phím nóng trên bàn phím trong ứng dụng web. Cho đến nay tôi đã sử dụng số jquery.hotkeys plugin và cho phép tôi triển khai các phím nóng đơn giản (ví dụ: một lần nhấn phím đơn như a).

Bây giờ để hỗ trợ một số định vị phức tạp hơn qua bàn phím, tôi muốn thực hiện phím nóng 'đa-key' như trong gmail, nơi ví dụ nhấn g (cho 'đi') tiếp theo là i (cho 'hộp thư đến' sẽ đưa bạn đến hộp thư đến.

Có ai biết về thành phần javascript (plugin jquery hoặc tương tự) cho tác vụ đó không? Hoặc những gì sẽ là một cách tiếp cận tốt để thực hiện các phím nóng như vậy?

Answer 1

Có giải pháp tốt hơn cho việc này bằng cách sử dụng keymaster với plugin keymaster-sequence.

Các nguồn đang ở đây keymaster.js và đây keymaster.sequence.js

Sử dụng chúng như thế này:

<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> 

Dưới đây là một cuộc biểu tình nhỏ http://jsfiddle.net/Nwdyd/1/ đó cũng cho thấy xử lý va chạm (ràng buộc g cũng như g i)

Answer 2

Đặt giá trị boolean chung khi nhấn g. Sau đó kiểm tra xem nó có được đặt khi i được nhấn. Bạn có thể tùy ý triển khai thời gian chờ trên g nhấn để bạn có thời gian giới hạn để nhấn i sau đó.

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; 
} 

Answer 3

Bạn vẫn có thể sử dụng plugin bằng cách thêm trạng thái và thời gian chờ, nhiều như Matt Fellows đề xuất.

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 
    } 
} 

giải pháp thay thế sẽ là kết nối lại các phím khi g được nhấn, và unbind họ khi thời gian chờ hết hạn hoặc khi thứ quan trọng i được nhấn.

Answer 4

Có một phiên bản mới của hotKeys.js hoạt động với phiên bản 1.10+ của jQuery. Nó là nhỏ, 100 dòng tập tin javascript. 4kb hoặc chỉ 2kb được rút gọn. Dưới đây là một số ví dụ sử dụng đơn giản là:

$('#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); 

Clone repo từ github: https://github.com/realdanielbyrne/HoyKeys.git hoặc đi đến trang repo github https://github.com/realdanielbyrne/HoyKeys hoặc ngã ba và đóng góp.