सफारी टैबिंडेक्स को अनदेखा कर रहा है

Question

मेरे पास 2 बटन के बाद टेक्स्टबॉक्स के बगल में 2 बटन और दूसरा टेक्स्टबॉक्स है। पहले टेक्स्ट बॉक्स की अधिकतम tabindex 1000 है, पहला बटन 1001 और दूसरा बटन 1002. दूसरा पाठ बॉक्स के 1003.

जब मैं टैब दबाते हैं, तो tabindex ठीक सभी ब्राउज़रों में सफारी के लिए छोड़कर काम करता है एक tabindex है, जहां यह तुरंत पहले टेक्स्टबॉक्स से दूसरे टेक्स्टबॉक्स में जाता है हालांकि टैबिंडेक्स ठीक से सेट किया गया है। इस मुद्दे को रोकने के तरीके पर कोई विचार?

Answer 1

सफारी (!) में डिफ़ॉल्ट टैब-एक्सेस अक्षम है। इसे सक्षम करने के लिए, पृष्ठ पर प्रत्येक आइटम को हाइलाइट करने के लिए "प्राथमिकताएं> उन्नत> प्रेस टैब" की जांच करें।

Answer 2

मैंने सफारी 5.1.5 के साथ निम्नलिखित की कोशिश की। मुझे नहीं पता कि यह पुराने संस्करणों के साथ कैसे काम करता है:

जब "किसी पृष्ठ पर प्रत्येक आइटम को हाइलाइट करना" (ग्राफ़िकडिवाइन द्वारा उत्तर देखें) अक्षम है, तो आप विकल्प (alt) + टैब दबाकर उस फ़ंक्शन का उपयोग कर सकते हैं।

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

तो यदि आप दो इनपुट-तत्वों के लिए एक tabindex = "1" (या 1001) और "3" (या 1003) परिभाषित करते हैं तो सफारी पहले इस फ़ील्ड पर ध्यान केंद्रित करेगा और फिर अन्य।

Answer 3

बनाना सफारी और एक मैक सुलभ:

Mac पर परीक्षण: सिस्टम प्राथमिकताएं -> कीबोर्ड -> शॉर्टकट (टैब) -> पूर्ण कीबोर्ड पहुंच -> सभी नियंत्रण

पर काम पर टैब के लिए सफारी: प्राथमिकताएं -> उन्नत -> पृष्ठ पर प्रत्येक आइटम को हाइलाइट करने के लिए टैब दबाएं (इसे जांचें)

Answer 4

यदि आप अपना स्वयं का वेबपृष्ठ लिख रहे हैं, तो मैं कुछ jquery/जावास्क्रिप्ट के साथ कुछ लिखना ठीक करूंगा। मैंने यही मेरा उपयोग किया है।

दोष यह है कि आप पृष्ठ पर डिफ़ॉल्ट टैब-कुंजी व्यवहार को रोकते हैं, जो कुछ स्थितियों में पहुंच के लिए बड़ी समस्या हो सकती है। लेकिन मुझे शक है।

var Tab = {}; 
Tab.i = 1, 
Tab.items = 0; 

function fixTabulation() { 
    /* This can be used to auto-assign tab-indexes, or 
    # commented out if it manual tab-indexes have 
    # already been assigned. 
    */ 
    $('input, select, textarea').each(function(){ 
     $(this).attr('tabindex', Tab.i); 
     Tab.i++; 
     Tab.items++; 
    }); 

    Tab.i = 0; 

    /* We need to listen for any forward or backward Tab 
    # key event tell the page where to focus next. 
    */ 
    $(document).on({ 
     'keydown' : function(e) { 
      if (navigator.appVersion.match("Safari")) { 
       if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed 
        e.preventDefault(); 
        Tab.i != Tab.items ? Tab.i++ : Tab.i = 1; 
        $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus(); 
       } 
       if (e.shiftKey && e.keyCode == 9) { //Tab key pressed 
        e.preventDefault(); 
        Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items; 
        $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus(); 
       } 
      } 
     } 
    }); 

    /* We need to update Tab.i if someone clicks into 
    # a different part of the form. This allows us 
    # to keep tabbing from the newly clicked input 
    */ 
    $('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) { 
     Tab.i = $(this).attr('tabindex'); 
     console.log(Tab.i); 
    }); 
} 

$(document).ready(function() { 
    fixTabulation(); 
}); 

यह कोई सही समाधान है, लेकिन यह प्रणाली Prefs में उनकी सफारी सेटिंग में बदलाव, lol जाने के लिए अपने सभी उपयोगकर्ताओं कह की तुलना में काफी बेहतर है।

Answer 5

समान समस्या उत्पन्न हुई और प्रोग्राम नेत्र रूप से टैब नेविगेशन को लागू करना पड़ा। सौभाग्य से इस jQuery tabbable प्लगइन https://github.com/marklagendijk/jQuery.tabbable पाया और यह अच्छा इस्तेमाल किया, यहाँ

require('../../node_modules/jquery.tabbable/jquery.tabbable'); 
$(document).ready(() => { 
    $(document).keydown((event) => { 
    if (event.keyCode === 9) { 
     window.$.tabNext(); 
     event.preventDefault(); 
    } 
    }); 
});