जीमेल जैसी हॉटकीज को कैसे कार्यान्वित करें

Question

मैं वेब एप्लिकेशन में कीबोर्ड हॉटकी को कार्यान्वित करना चाहता हूं। अब तक मैं jquery.hotkeys plugin का उपयोग कर रहा हूं, और इसने मुझे सरल हॉटकी लागू करने की अनुमति दी है (उदाहरण के लिए जैसे एकल कीस्ट्रोक)।

अब कुंजीपटल के माध्यम से कुछ और अधिक जटिल नेविगेशन समर्थन करने के लिए, मैं जहां उदाहरण जी दबाने के लिए (के लिए 'जाना') मैं के बाद जीमेल, में की तरह 'बहु-कुंजी' हॉटकी लागू करना चाहते हैं ('इनबॉक्स' के लिए) आपको इनबॉक्स ले जाता है।

क्या किसी को उस कार्य के लिए जावास्क्रिप्ट घटक (jquery प्लगइन या इसी तरह) पता है? या ऐसी हॉटकी को लागू करने के लिए एक अच्छा तरीका क्या होगा?

Answer 1

keymaster का उपयोग करके keymaster-sequence प्लगइन के साथ इसका बेहतर समाधान है।

सूत्रों यहाँ हैं keymaster.js और यहाँ keymaster.sequence.js

उन्हें इस तरह का उपयोग करें:

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

यहां एक छोटा प्रदर्शन http://jsfiddle.net/Nwdyd/1/ जो भी टकराव से निपटने (बाध्यकारी g के साथ-साथ g i)

Answer 2

जी दबाए जाने पर वैश्विक बूलियन मान सेट करें। फिर जांचें कि यह सेट है कि i दबाया गया है या नहीं। आप वैकल्पिक रूप से g पर एक टाइमआउट लागू कर सकते हैं ताकि आपके पास i दबाए जाने के लिए सीमित समय हो।

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

आप अभी भी एक राज्य और एक टाइमआउट जोड़कर प्लगइन का उपयोग कर सकते हैं, जितना 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 
    } 
} 

वैकल्पिक समाधान जब जी दबाया जाता है कुंजी rebind हो, और उन्हें निकल जब समय समाप्त समाप्त हो रहा है या जब माध्यमिक कुंजी मैं दबाया जाता है जाएगा।

Answer 4

से पता चलता है HotKeys.js का एक नया संस्करण है जो jQuery के 1.10+ संस्करण के साथ काम करता है। यह छोटी, 100 लाइन जावास्क्रिप्ट फ़ाइल है। 4kb या सिर्फ 2kb minified। यहाँ कर रहे हैं कुछ सरल उपयोग उदाहरण हैं: 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); 

क्लोन रेपो: https://github.com/realdanielbyrne/HoyKeys.git या GitHub रेपो पेज https://github.com/realdanielbyrne/HoyKeys या कांटा और योगदान करने के लिए जाना।