अपनी वेबसाइट पर कीबोर्ड शॉर्टकट कैसे जोड़ें

प्यार कीबोर्ड शॉर्टकट? वे आपको बहुत समय बचाने में मदद कर सकते हैं, है ना? क्या आप अपने आगंतुकों के लाभ के लिए अपनी खुद की वेबसाइट पर कीबोर्ड शॉर्टकट जोड़ना चाहेंगे? यह आपकी साइट की पहुंच और नेविगेशन में बहुत सुधार करेगा.

इस पोस्ट में, मैं Mousetrap नामक एक जावास्क्रिप्ट पुस्तकालय का उपयोग करके आपके वेब पेज पर शॉर्टकट जोड़ने के बारे में एक त्वरित मार्गदर्शिका दूंगा। Mousetrap के साथ आप कर सकते हैं नामित कुंजी जैसे Shift, Ctrl, Alt, Options, और कमांड टू अपनी वेबसाइट में विशेष कार्य करते हैं. यह पुराने ब्राउज़रों में भी अच्छा काम करता है.

होंगकीट पर अधिक:

• Hint.Css के साथ आसानी से एनिमेटेड टूलटिप बनाना
• Intro.Js [ट्यूटोरियल] का उपयोग करके चरण-दर-चरण मार्गदर्शिका का निर्माण करना
• HTML5 रेंज स्लाइडर को कैसे स्टाइल करें
• कुकी और HTML5 लोकलस्टोर का उपयोग कैसे करें

शुरू करना

सामग्री के साथ एक नया HTML दस्तावेज़ बनाकर, और Mousetrap लाइब्रेरी को लिंक करके शुरू करें। मैं CDNjs में होस्ट किए गए Mousetrap लाइब्रेरी का उपयोग करूंगा ताकि लाइब्रेरी को CloudFlare नेटवर्क के माध्यम से परोसा जाए, जो हमारे स्वयं के सर्वर से तेज होनी चाहिए

अब हम Mousetrap का उपयोग करेंगे 'बाँध' फंक्शन के साथ कीबोर्ड कीज को अटैच करने की विधि। आप असाइन कर सकते हैं एक एकल कुंजी, एक कुंजी संयोजन, या अनुक्रम कुंजी, उदाहरण के लिए

एकल कुंजी

इस उदाहरण में, हम एस को बांधते हैं.

 Mousetrap.bind ('s', function (e) // आपका फंक्शन यहाँ ...); 

संयोजन कुंजी

इस उदाहरण में, हम Ctrl और s को बांधते हैं। निर्दिष्ट फ़ंक्शन करने के लिए आपको दो कुंजियों को पूरी तरह से दबाने की आवश्यकता होगी.

 Mousetrap.bind ('ctrl + s', function (e) // अपना फंक्शन यहाँ ...); 

अनुक्रम कुंजी

इस उदाहरण में, उपयोगकर्ता को g और फिर दबाना होगा रों बाद में। यदि आप वेब-आधारित गेम विकसित कर रहे हैं तो यह एक गुप्त छिपे हुए कुंजी कॉम्बो को जोड़ने के लिए उपयोगी हो सकता है.

 Mousetrap.bind ('g s', function (e) // your function here ...); 

Mousetrap का उपयोग करना

हम कीबोर्ड शॉर्टकट के एक जोड़े के साथ एक सरल वेब पेज बनाएंगे जो उपयोगकर्ताओं को वेबसाइट पर कुछ कार्यक्षमता तक पहुंचने में सक्षम बनाता है। हम HTML दस्तावेज़ में हेरफेर करना और HTML तत्वों का चयन करना आसान बनाने के लिए jQuery का उपयोग करेंगे.

चलो कुछ आसान से शुरू करते हैं.

हम एक कुंजी को बांधने जा रहे हैं जो उपयोगकर्ता को खोज इनपुट क्षेत्र पर तेज़ी से ध्यान केंद्रित करने की अनुमति देगा.

1. निम्नलिखित के साथ खोज के लिए HTML मार्कअप है आईडी.

2. अगला, हम एक फ़ंक्शन बनाते हैं जो खोज इनपुट पर ध्यान केंद्रित करेगा.

 समारोह खोज () var खोज = $ ('# खोज'); search.val ("); search.focus () ;; 

3. अंत में, हम फ़ंक्शन को चलाने के लिए एक कुंजी को बांधते हैं.

 Mousetrap.bind ('/', खोज); 

4. यह बात है। अब आपको / बटन दबाकर खोज इनपुट पर नेविगेट करने में सक्षम होना चाहिए.

वैकल्पिक रूप से, आप कुंजी संयोजन, Ctrl / Cmd + F को भी बाँध सकते हैं, जो कई डेस्कटॉप ऐप्स में खोज के लिए उपयोग किया जाने वाला एक लोकप्रिय शॉर्टकट है:

 Mousetrap.bind (['कमांड + f', 'ctrl + f'], खोज); 

बूटस्ट्रैप के साथ मूसट्रैप का उपयोग करना

मूसट्रैप को एक फ्रेमवर्क के साथ एकीकृत करना आसान है, उदाहरण के लिए, बूटस्ट्रैप। इस दूसरे उदाहरण में, हम एक सहायता विंडो दिखाएंगे जो वेबसाइट पर उपलब्ध शॉर्टकट की एक सूची प्रदर्शित करेगी। यहां, मैं सूची प्रस्तुत करने के लिए बूटस्ट्रैप मोडल का चयन करता हूं, और नामित करता हूं? मोडल दिखाने की कुंजी.

हालांकि ? केवल Shift कुंजी के साथ पहुंच योग्य है, केवल बाध्यकारी? कुंजी पर्याप्त है.

 Mousetrap.bind ('?', Function () $ ('# मदद'); modal ('शो');); 

अब जब तुम मारा? कुंजी, एक पॉपअप दिखाई देगा.

कुशल बंधन के लिए टिप

समय के साथ, कीबोर्ड शॉर्टकट्स का आपका बढ़ता हुआ संग्रह आपके कोड को गड़बड़ाना शुरू कर सकता है। यदि ऐसा होता है, तो एक एक्सटेंशन है जिसे आप अपने बनाने के लिए जोड़ सकते हैं “कुंजी बंधन” अधिक कुशल कोड। इसे नाम दिया गया है “बाँध शब्दकोश”. प्राथमिक मूसट्रैप लाइब्रेरी के बाद इस एक्सटेंशन को जोड़ें, mousetrap.min.js.

अब, प्रत्येक कुंजी बंधन को अलग करने के बजाय, हम बड़े करीने से उन्हें एकल में समूहित कर सकते हैं .बाँध () विधि, जैसे:

 Mousetrap.bind ('/': search, 't': tweet, '?': Function modal () $ ('# मदद'); modal ('show');, 'j': function next; ) HighLight ('j'), 'k': function prev () highLight ('k')); 

अधिक उन्नत कार्यान्वयन के लिए, आप उस डेमो को देख सकते हैं जो मैंने बनाया है। डेमो में, आप पोस्ट को हाइलाइट करने के लिए J या K कुंजी दबा सकते हैं, और वर्तमान पोस्ट को हाइलाइट करने के लिए T को दबा सकते हैं.

• डेमो देखें
• डाउनलोड