एक विशिष्ट तत्व पर mousetrap का उपयोग कर?

Question

मैं चूहादानी जावास्क्रिप्ट पुस्तकालय का उपयोग कर रहा है और एक विशिष्ट तत्व पर इनपुट पर कब्जा करने के लिए इच्छुक हूँ।

परिदृश्य मैं उपयोगकर्ता नाम और पासवर्ड के लिए एक पाठ बॉक्स जो KnockoutJS फिर जब एक बटन दबाया जाता है एक ajax अनुरोध उपयोगकर्ता के लिए लॉग इन करने के लिए किया जाता है के लिए बांधता है। अब के रूप में वहाँ कोई रूप नहीं है और इसके नहीं एक असली बटन अपने एक लंगर कि jQuery के यूआई एक बटन अगर वहाँ तत्व के बजाय दस्तावेज़ स्तर पर बाध्य करने के लिए चूहादानी पाने के लिए कुछ आसान तरीका था मैं सोच रहा था में बदल जाता है।

इसलिए उदाहरण के लिए एक सामान्य चूहादानी बाध्यकारी होगा:

Mousetrap.bind('enter', function(event) { CallSomeAjaxMethod(); }); 

अब जब कि किसी भी पृष्ठ पर कुंजी दबाएँ दर्ज के लिए (एक पाठ बॉक्स तत्व के बाहर) की जाँच करेगी और कर उस पर आधारित कुछ। अब समस्या इस मामले में है कि जब भी यह एक विशिष्ट तत्व के दायरे में किया जाता है तो मैं केवल इस घटना को कैप्चर करने में सक्षम होना चाहता हूं।

Mousetrap.bind('enter', function(event) { CallSomeAjaxMethod(); }).on(element); 

वहाँ यह करने के लिए कोई तरीका है:

var element = document.getElementById("some-element"); 
Mousetrap.bind('enter', element, function(event) { CallSomeAjaxMethod(); }); 

या शायद अधिक की तरह धाराप्रवाह:

इसलिए उदाहरण के लिए मैं कुछ likethis करना चाहते किया जाएगा? एक ही तरीका है मैं यह करने के (चूहादानी के साथ) देख सकते हैं वर्तमान में इस दस्तावेज़ गुंजाइश बाध्यकारी है और बस तत्व घटना पर उठाया गया था, तो यह संभव है प्राप्त करने की कोशिश है।

मुझे पता है तुम तथापि के रूप में मैं पहले से ही चूहादानी भरी हुई मैं उसे यहां पुन: उपयोग करने के लिए यदि संभव हो तो करना चाहते हैं jQuery या वेनिला js साथ बात की इस तरह कर सकते हैं।

Answer 1

मैं इस पर अनुवर्ती करना चाहता था। संस्करण 1.5.0 (आज जारी) के रूप में, यह अब mousetrap में मूल रूप से संभव है।

तुम सब करने की है ऊपर अपने विशिष्ट उदाहरण के लिए

var element = document.getElementById("some-element"); 
Mousetrap(element).bind('enter', function(event) { CallSomeAjaxMethod(); }); 

तुम भी कई चीजों को बाध्य करने के चूहादान का एक नया उदाहरण बना सकते हैं।

var mousetrap = new Mousetrap(element); 
mousetrap.bind('space', _handleSpace); 
mousetrap.bind('enter', _handleEnter); 

सबसे अच्छा यह पिछड़ा संगत होना चाहिए ताकि आपका सभी मौजूदा कोड अभी भी काम करेगा।

Answer 2

अधिकार के रूप में अब अपने प्रश्न का संक्षिप्त उत्तर वहाँ चूहादानी में मूल रूप ऐसा करने के लिए कोई रास्ता नहीं है। ऐसा कहा जा रहा है कि आप कुछ तरीकों से संपर्क कर सकते हैं।

1. मैं KnockoutJS से परिचित नहीं हूँ, लेकिन ब्राउज़रों enter कुंजी ट्रिगर एक रूप यह बताने के लिए बनाया जाता है प्रस्तुत इसलिए सबसे सुरुचिपूर्ण समाधान शायद एक रूप है जो मामले में तुम नहीं के अपने आदानों हिस्सा बनाने के लिए किया जाएगा सबमिट जमा ट्रिगर करने के लिए सभी को mousetrap की जरूरत है। आप फॉर्म पर e.preventDefault() पर कॉल कर सकते हैं यह सुनिश्चित करने के लिए सबमिट करें कि यह वास्तव में सर्वर पर वापस पोस्ट नहीं करता है।

2. यदि आप टेक्स्ट इनपुट में mousetrap श्रेणी जोड़ते हैं तो यह कीबोर्ड शॉर्टकट प्राप्त करने की अनुमति देगा। फिर आप अपने कॉलबैक में e.target देख सकते हैं यह देखने के लिए कि क्या वह उस टेक्स्टरेरा से आया है। इस तरह यह कुछ दिखेगा:

   एचटीएमएल

   <input type="text" name="email" class="mousetrap"> 
   

   js

   var input = $('input[name=email]'); 
   Mousetrap.bind('enter', function(e) { 
       if (e.target === input[0]) { 
        console.log('triggered from input'); 
       } 
   }); 
   

3. आप इस लक्ष्य को हासिल करने के लिए Mousetrap.stopCallback समारोह के ऊपर लिख सकता है। यह सबसे सुंदर समाधान नहीं है, लेकिन काम करना चाहिए।

   एचटीएमएल

   <input type="text" name="email"> 
   

   js

   var input = $('input[name=email]'); 
   var _oldStopCallback = Mousetrap.stopCallback; 
   Mousetrap.stopCallback = function(e, element, combo) { 
       if (combo === 'enter') { 
        return element !== input[0]; 
       } 
       return _oldStopCallback(e, element, combo); 
   } 
   
   Mousetrap.bind('enter', function(e) { 
       console.log('triggered from input'); 
   }); 
   

मैं अलग अलग तरीकों से मैं चूहादानी में अलग-अलग दायरों/संदर्भों का समर्थन कर सकते में देख रहा हूँ इसलिए उम्मीद है कि वहाँ एक आसान तरीका हो जाएगा भविष्य में।