थोड़ा सा अभ्यास: jQuery हॉटकीज़

प्रस्तावना

मैं यहां नेटवर्क के विकास के बारे में नहीं लिखूंगा, साइटों से सेवाओं और वेब अनुप्रयोगों के लिए एक चिकनी संक्रमण के बारे में, और अन्य समान निष्कर्षों का संदर्भ देता हूं, जिनमें से प्रतिबंध केवल उनके न्याय द्वारा तर्क दिया जा सकता है।

इसके बजाय, मैं अपने एक घटनाक्रम को साझा करने की कोशिश करूंगा, ईमानदारी से उम्मीद करता हूं कि यह जानकारी वास्तव में किसी के लिए उपयोगी होगी (कम से कम एक सामान्य विचार के संदर्भ में)।



यह कोई रहस्य नहीं है कि जेएस फ्रेमवर्क "एक विशिष्ट बटन पर एक हॉटकी फांसी" का कार्य करते हैं यदि तुच्छ नहीं है, तो काफी सरल है। और यहां तक ​​कि कार्यात्मक तत्वों के लिए "गर्म कुंजी" के बंधन को सरल और स्वचालित करने का कार्य काफी सरलता से हल किया जाता है।







सबसे पहले, मैं आपको हॉट कीज़ का उपयोग करने की उद्देश्य कठिनाइयों और सीमाओं के बारे में बताऊंगा।

सिद्धांत

1. "हॉट की" ब्राउज़र द्वारा कब्जा कर लिया जाता है

   हां, उपयोगकर्ता "हॉट की" के लिए सबसे सुविधाजनक और परिचित हैं, ब्राउज़र द्वारा कब्जा कर लिया गया है। और यह अभी भी आधी परेशानी है, और परेशानी यह है कि वे विभिन्न ब्राउज़रों में व्यस्त हैं! उदाहरण के लिए, नेविगेट करने के लिए किसी भी संशोधक के साथ नेविगेशन कुंजी ("तीर") का उपयोग करना अद्भुत होगा, उदाहरण के लिए, लंबी सूचियों के पृष्ठों के बीच। "किसी भी के साथ" अच्छा है, लेकिन किसके साथ? Alt-left / Alt-right का उपयोग FF और IE, Ctrl-left / Ctrl-right - इन दोनों विधियों में किया जाता है - इन दोनों विधियों में - सफारी में इंट्रा-ब्राउज़र बैक / फॉरवर्ड नेविगेशन के लिए, और भले ही तकनीकी रूप से इस कार्यक्षमता को अवरुद्ध करना संभव हो - यह था एक बहुत बुरा विचार होगा। यह सिर्फ एक उदाहरण है, और लगभग सभी "सुविधाजनक और परिचित" हॉट कुंजियाँ पहले से ही ली गई हैं - अन्यथा, शायद, वे परिचित नहीं होंगे, न ही (परिणामस्वरूप) सुविधाजनक। यह तथ्य साइटों के उपयोग पर महत्वपूर्ण प्रतिबंध लगाता है, और उन्हें अत्यधिक सावधानी के साथ चुना जाना चाहिए।

2. हॉट की कुछ और के साथ व्यस्त हैं

   स्पष्ट रूप से वही "हॉट कीज़" के लिए सही है, उदाहरण के लिए, ऑपरेटिंग सिस्टम द्वारा। उदाहरण के लिए - इनपुट फ़ील्ड में समान Ctrl-left / Ctrl-right का अर्थ कुछ अलग है, लेकिन उपयोगकर्ता के लिए सुविधाजनक और परिचित भी है। इनपुट / टेक्स्टारिया में Ctrl-left को धक्का देने वाले उपयोगकर्ता का एक उदाहरण और परिणामस्वरूप कुछ ऐसा हो सकता है जो वह नहीं था जो वह मन में था, खुद को सुझाव देता है।

3. आम तौर पर बोलने वाले संशोधक अलग-अलग होते हैं

   पीसी कीबोर्ड पर Ctrl, Alt और Shift मौजूद होते हैं। लेकिन पीसी के अलावा बहुत कुछ है ... उदाहरण के लिए, मैक। "हॉट कीज़" को सही ढंग से कार्यान्वित करने के लिए, कम से कम सामान्य शब्दों में यह जानना आवश्यक है कि अन्य प्लेटफ़ॉर्म पर मॉडिफ़ायर क्या उपलब्ध हैं, वे कहाँ स्थित हैं और वे कैसे भिन्न होते हैं ... और आदर्श रूप से, यह देखने के लिए, स्पर्श करने, प्रहार करने में सक्षम होने के लिए अच्छा होगा, शारीरिक रूप से, बजाय बोलने के लिए। सभी को ऐसा अवसर मिला है।

अंत में, मैं ध्यान देता हूं कि यह सब है - सिर्फ कठिनाइयाँ, और कुछ अड़चनें नहीं।

अभ्यास

विचार

यह सरल है: हम कुंजियों के प्रतीकात्मक संकेतन को निर्धारित करते हैं, सक्रिय तत्वों को एक अतिरिक्त वर्ग असाइन करते हैं जिसका नाम कुंजी के प्रतीक से मेल खाता है, और जब कोई भी बटन दबाया जाता है, तो हम देखते हैं कि क्या पृष्ठ पर एक सक्रिय तत्व है जिसका वर्ग दबाए गए बटन के प्रतीक से मेल खाता है। अगर वहाँ है, हम पाया सक्रिय तत्व को सक्रिय करते हैं।

कार्यान्वयन

पहले दो उपकथाएं मेरे दृष्टिकोण से तुच्छ हैं और विस्तृत विचार की आवश्यकता नहीं है। हमें तीसरे पर ध्यान दें।



बटन पर क्लिक करें (तुच्छ):



$(document).keydown(CheckKeyDown);







इसके बाद किसी भी तरह की समस्या को हल करना है "उपयोगकर्ता को आराम से पाठ दर्ज करने के लिए परेशान न करें।" मैंने लंबे समय तक खोज किया (लेकिन कभी नहीं पाया गया) यह निर्धारित करने के लिए कि वर्तमान में किस तत्व पर ध्यान केंद्रित किया गया है (शायद कोई आपको बताएगा) "हॉट" कुंजी को बंद करने के लिए यदि "केंद्रित" तत्व एक इनपुट फ़ील्ड है। अंत में, मैंने वैश्विक वैरिएबल के आसपास जाने का फैसला किया जो "हॉट कीज़" को ब्लॉक करता है:

hotkeysDisabled = false;

$('input, textarea').focus(function(){hotkeysDisabled=true;}).blur(function(){hotkeysDisabled=false});

function CheckKeyDown(e) {

if(hotkeysDisabled)

return true;

...







यदि कोई बेहतर और अधिक सुरुचिपूर्ण तरीके से जानता है - मैं जानकारीपूर्ण टिप्पणी के लिए आभारी रहूंगा।



यह दबाए गए कुंजी के लिए प्रतीक की पहचान करने का समय है। विकल्प "जैसा कि संख्या है" को तुरंत अस्वीकार कर दिया गया था - फॉर्म ctrl_13 के प्रतीकात्मक पदनाम का उपयोग करने के लिए या, रात तक याद नहीं रखने के लिए, alt_219 बेहद असुविधाजनक है। अकेले String.fromCharCode () का उपयोग भी अपरिहार्य है - बहुत बार यह ऐसा उत्पादन करता है कि आप इसे एक कक्षा में निर्दिष्ट नहीं कर सकते। मुझे कोई अन्य नियमित साधन नहीं मिला, इसलिए मैंने इस तरह का एक भारी और बदसूरत डिज़ाइन बनाया:

function keyCodeString(e)

{

var keyCodeStrings = {

8: 'backspace',

9: 'tab',

...

222: 'quote'

}

...

s = '';

if(e.ctrlKey) s = s + 'ctrl_';

if(e.altKey) s = s + 'alt_';

return s + keyCodeStrings[e.keyCode];

}







लालित्य की कमी के बावजूद, इस डिजाइन का एक निर्विवाद लाभ है - यह पर्याप्त रूप से काम करता है। किसी भी मामले में, प्रयोगशाला में।



अंतिम चरण रहता है - पाया को सक्रिय करने के लिए, यदि यह पाया जाता है। स्पष्ट रूप से पर्याप्त है, लेकिन फिर भी मैं वर्णन करूंगा ...



लिंक का पालन करें:

var keyCode = keyCodeString(e);

var selector='a.'+keyCode;

if($(selector).size() > 0)

{

location.href=$(selector).attr('href'); // your favorite load/go method

return false;

}









इनपुट क्षेत्र का सक्रियण / बटन दबाने पर:

$('.'+keyCode+':input').focus().click();









शायद यही सब है।

अंतभाषण

पूरे कोड को यहां देखा जा सकता है ।

मैं विषय का पूरी तरह से खुलासा करने का दिखावा नहीं करता, मैं विभिन्न समायोजन, परिवर्धन और रचनात्मक आलोचना का स्वागत करता हूं। नियम विषय के किसी भी हिस्से पर लागू होता है: "यदि आप जानते हैं कि बेहतर कैसे करना है - कृपया मुझे इसके बारे में बताएं।" आपका ध्यान देने के लिए धन्यवाद।