2011-09-12 12 views
6

मेरे पास मेरी वेबसाइट पर उपयोगिता चिंता है। मेरे पास टैब का एक सेट है, प्रत्येक में एक फॉर्म है। जब आप टैब लिंक पर क्लिक करते हैं, तो यह टैब सामग्री निकाय में पहले टेक्स्टबॉक्स पर ध्यान देता है। माउस उन्मुख लोग इस "फीचर" से प्यार करते हैं। समस्या तब होती है जब कीबोर्ड-ओरिएंटेड उपयोगकर्ता टैब के माध्यम से जाने के लिए अपने कीबोर्ड पर टैब कुंजी का उपयोग करते हैं। वे उस टैब पर एंटर दबाते हैं, जिसे वे देखना चाहते हैं, क्लिक ईवेंट आग लगती है और टैब दिखाई देता है, लेकिन टेक्स्टबॉक्स पर फोकस दिया जाता है, जिससे उनके टैब ऑर्डर को पूरी तरह समायोजित किया जाता है। तो जब वे फिर से टैब दबाते हैं, तो वे स्क्रीन पर अगले टैब पर जाना चाहते हैं, लेकिन चूंकि फोकस को फॉर्म के अंदर ले जाया गया था, इसलिए वे कीबोर्ड का उपयोग करके आसानी से अगले टैब तक नहीं पहुंच सकते हैं।jQuery क्लिक इवेंट - कैसे बताना है कि माउस क्लिक किया गया था या कुंजी दर्ज की गई थी?

तो, क्लिक ईवेंट के अंदर मुझे यह निर्धारित करने की आवश्यकता है कि क्या उन्होंने वास्तव में माउस बटन पर क्लिक किया है या नहीं। क्या यह संभव है? मेरा पहला प्रयास था यह:

$("#tabs li a").click(function(e) { 
    var tab = $(this.href); 
    if(e.keyCode != 13) 
    $("input:first", tab).focus(); 
}); 

लेकिन keyCode हमेशा 0. which संपत्ति भी है हमेशा 0. कृपया मदद है!

+0

आप संभवतः टेक्स्टबॉक्स पर एक .focus() हैंडलर डालकर थोड़ा सा तर्क डालकर इसके आसपास हैक कर सकते हैं। – krasnerocalypse

+0

@ krasnericalypse एर, वास्तव में नहीं। एक बार टेक्स्टबॉक्स/ड्रॉपडाउन पर फोकस दिया जाता है, यह ठीक होने में बहुत देर हो चुकी है। –

+0

हाहा। यह कठिन है। – krasnerocalypse

उत्तर

4

यहां जिस समाधान के साथ आया था, यह आश्चर्यजनक रूप से सरल है। मैं टैब लिंक पर keydown फंस, और क्लिक करें घटना शुरू हो रहा है जब कीकोड 13. सौभाग्य था, trigger समारोह ईवेंट हैंडलर के लिए अतिरिक्त पैरामीटर पारित करने के लिए हमें की अनुमति देता है ...

$("#tabs li a").keydown(function(e) { 
    if(e.keyCode == 13) { 
    $(this).trigger("click", true); 
    e.preventDefault(); 
    } 
}); 

तो मैं सिर्फ बदलना पड़ा अपना हैंडलर क्लिक करें नया पैरामीटर प्राप्त करने के लिए और इसका इस्तेमाल करते हैं ...

$("#tabs li a").click(function(e, enterKeyPressed) { 
    if(enterKeyPressed) 
    alert("Enter key"); 
    else 
    alert("Clicked"); 
}); 

मैं भी एक demo on jsFiddle ऊपर डाल दिया। प्रश्न पढ़ने वाले हर किसी के लिए धन्यवाद।

+0

मैं 4 मिनट के बारे में एक ही चीज़ कर रहा हूं, हम प्रतिभा = पी हैं – AgelessEssence

0

वैश्विक "फोकस" परिवर्तनीय कार्य होगा, जो किसी दिए गए टैब पर टैब उपयोग के बाद माउस सेटिंग पर फ़ोकस अक्षम करता है जब तक कि माउस को नए ब्लॉक में स्थानांतरित नहीं किया जाता है।

यह आपके अनुरोध की सुविधा नहीं होगी, लेकिन मेरा मानना ​​है कि यह आपको जो भी ढूंढ रहा है वह आपको दे सकता है।

उदाहरण के लिए। माउस hoovers विकल्प 5, आप टैब हिट करते हैं, अब आप चर में 5 स्टोर करते हैं, जब तक कि किसी और पर ध्यान केंद्रित नहीं किया जाता है, लेकिन कुछ और ध्यान केंद्रित होने तक, वैश्विक को वापस -1 में बदल दिया जाता है।

साफ-सुथरा कामकाज मैं स्वतंत्र रूप से स्वीकार नहीं करता हूं।

+0

मेरे पास इतने सारे ईवेंट हैंडलर नहीं चल रहे हैं ... ये फॉर्म बड़े हैं। यह निश्चित रूप से ब्राउज़र को लॉक कर देगा। –

संबंधित मुद्दे