टैबिंडेक्स का उपयोग किए बिना टैबबिंग करते समय मैं आइटम कैसे छोड़ूं?

Question

क्या जावास्क्रिप्ट ऑनफोकस() हैंडलर में टैब ऑर्डर में अगले आइटम पर फ़ोकसोलिन करने के लिए कोई अच्छा तरीका है, बिना आइटम के मैन्युअल रूप से दर्ज किए गए आइटम को मैन्युअल रूप से दर्ज किए बिना?

मैंने Django/jQuery में एक HTML दिनांक पिकर बनाया। यह एक कैलेंडर आइकन है जिसके बाद कैलेंडर आइकन पॉप-अप होता है। मैं कैलेंडर आइकन के लिए लिंक छोड़कर, अगले इनपुट में लाइन संपादन से टैब में सक्षम होना चाहता हूं। मेरा मतलब है कि यह एक सामान्यीकृत विजेट बनने के लिए है, इसलिए मैं जो कुछ भी अगली है और उसे कॉल करने के लिए आईडी को हार्डकोड नहीं कर सकता। फोकस()। मुझे पता है कि मैं सबकुछ पर tabindex विशेषताएँ सेट कर सकता हूं, लेकिन यह जितना चाहें उतना मैनुअल है। इसके अलावा, आईआईआरसी, जो इसे ध्यान में रखने से नहीं रोकेगा, यह सिर्फ टैब ऑर्डर के अंत में रखेगा।

Answer 1

शायद

:

$("#your-calendar-icon").focus(function() { 
    $(this).trigger("blur"); 
); 

Answer 2

लिंक के बजाय कैलेंडर आइकन के चारों ओर एक div का प्रयोग करें। फिर अपने कैलेंडर घटनाओं को div में संलग्न करें। डिफ़ॉल्ट रूप से, div एक टैब स्टॉप नहीं होगा।

Answer 3

चेक इस संसाधन:

• Getting, setting, and removing tabindex values with JavaScript
• jQuery Tabindex Plugin

Answer 4

या:

$("#your-calendar-icon").focus(function() { 
    $(somethingElse).trigger("focus"); 
}); 

Answer 5

यह हमेशा तो क्यों नहीं कैलेंडर के बाद इनपुट किया जा रहा है, तो:

$('#your-calendar-icon').focus(function() { 
    $(this).next('input').focus(); 
}); 

व्यक्तिगत रूप से, मैं कहूंगा कि यदि यह एक प्लगइन होने जा रहा है तो आपको केवल अगले तत्व को एक कॉन्फ़िगरेशन विकल्प बनाना चाहिए जिसमें डिफ़ॉल्ट है, और दस्तावेज़ों में डिफ़ॉल्ट निर्दिष्ट करें।

Answer 6

उस नियंत्रण के लिए tabindex = "-1" सेट करें और ब्राउज़र उस नियंत्रण को टैबबिंग से छोड़ देगा।

Answer 7

@thetacom कहते हैं, आप केवल एक और प्रकार का तत्व उपयोग कर सकते हैं, जिसे फोकस नहीं मिलता है। यदि आप अभी भी टैब कार्यक्षमता में से कुछ रखना चाहते हैं, तो आप SkipOnTab आज़मा सकते हैं।

SkipOnTab: आगे टैब क्रम से चयनित प्रपत्र फ़ील्ड्स मुक्त किए जाने वाले एक jQuery प्लगइन।

बस दिनांक पिकर आइकन (या अन्य तत्व/कंटेनर) में data-skip-on-tab="true" जोड़ें जिसे आप छोड़ना चाहते हैं। आप अभी भी दिनांक पिकर को सक्रिय करने के लिए क्लिक कर सकते हैं या शिफ्ट - टैब का उपयोग करके वापस जाएं और एंटर कुंजी का उपयोग कर सकते हैं।

the simple demo और the business case demo देखें।