Tabindex से HTML एलिमेंट को कैसे अनदेखा करें?

Question

क्या HTML में ऐसा कोई तरीका है जो ब्राउज़र को बताए कि विशेष तत्वों पर टैब इंडेक्सिंग की अनुमति नहीं है?

मेरे पेज पर यद्यपि एक साइडशो है जो jQuery के साथ प्रदान किया गया है, जब आप उस के माध्यम से टैब करते हैं, तो आपको पृष्ठ पर अगले दृश्य लिंक के लिए टैब नियंत्रण स्थानांतरित होने से पहले बहुत सारे टैब प्रेस मिलते हैं क्योंकि सभी चीजें टैब के माध्यम से छिपाई जाती हैं। उपयोगकर्ता नेत्रहीन।

Answer 1

आप उपयोग कर सकते हैं tabindex="-1"।

W3C HTML5 विशिष्टता नकारात्मक समर्थन करता है, tabindexमान:

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

---

हालांकि देखें कि यह HTML5 फीचर है और पुराने ब्राउजर के साथ काम नहीं कर सकता है।
होना करने के लिए (1999 से) W3C एचटीएमएल 4.01 मानक के अनुरूप, tabindex सकारात्मक करने की आवश्यकता होगी।

---

शुद्ध HTML में नीचे नमूना उपयोग।

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

Comments

ऐसा प्रतीत होता है कि Google Chrome -1 का समर्थन नहीं करता है, जो समझ में आता है क्योंकि तकनीकी रूप से tabIndex केवल लिंक के अनुसार 0 -32767 का समर्थन करता है W3। इसलिए जब मैंने ऐसा किया; मैंने 500 का उपयोग किया। हैकिश; लेकिन काम किया।

— पिस्सू

@ संस्करण 23 के अनुसार, Google Chrome टैबइंडेक्स पर -1 का समर्थन करता है। यकीन नहीं होता कि कितनी देर पहले हुआ था, शायद 23 से पहले। मैंने क्रोम 23, फ़ायरफ़ॉक्स 18, IE8, IE9 और ओपेरा 12.11 में "-1" का परीक्षण किया और इसने पूरे बोर्ड में काम किया।

— jkupczak

मैंने अपडेट किए गए HTML5 विनिर्देश से लिंक करने के लिए उत्तर संपादित किया है। tabindexअब नकारात्मक मान रखने की अनुमति देता है।

— जेम्स डोनली

@JamesDonnelly आपके संपादन के लिए धन्यवाद। मैंने ब्राउज़र कम्पैटिबिलिटी के लिए W3C HTML4 कल्पना के संदर्भ को फिर से जोड़ा।

— मार्टिन हेन्निंग्स

IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx

— Skurpi

Answer 2

यह मत भूलो, भले ही tabindexचश्मा और HTML में, जावास्क्रिप्ट / डोम में सभी लोअरकेस हों, जिसे प्रॉपर्टी कहा जाता है tabIndex।

यह जानने की कोशिश में अपना दिमाग न गंवाएं कि आपके प्रोग्रामेटिक रूप से परिवर्तित टैब इंडेक्स कॉलिंग element.tabindex = -1काम क्यों नहीं कर रहा है। का उपयोग करें element.tabIndex = -1।

Comments

ऐसा लगता है कि यह एक टिप्पणी होना चाहिए जवाब नहीं।

— DrCord

एह, मुझे इसे पढ़कर खुशी हुई, और अगर यह एक टिप्पणी के रूप में दफन हो जाता तो शायद मैं इसे याद कर लेता।

— मैल्कमऑन

Answer 3

यदि ये बटन और एंकर जैसे टैब क्रम में स्वाभाविक रूप से तत्व होते हैं, तो उन्हें टैब ऑर्डर से टैबइंडेक्स = -1 के साथ हटाना एक एक्सेसिबिलिटी गंध की तरह है। यदि वे डुप्लिकेट कार्यक्षमता प्रदान कर रहे हैं तो उन्हें टैब क्रम से हटा देना ठीक है, और इन तत्वों में aria-hidden = true को जोड़ने पर विचार करें ताकि सहायक प्रौद्योगिकियां उन्हें अनदेखा कर दें।

Answer 4

यदि आप एक ऐसे ब्राउज़र में काम कर रहे हैं जो समर्थन नहीं करता है tabindex="-1", तो आप उन चीज़ों को देने में सक्षम हो सकते हैं जिन्हें वास्तव में उच्च टैब इंडेक्स पर छोड़ना आवश्यक है । उदाहरण के लिए, tabindex="500"मूल रूप से पृष्ठ के अंत में ऑब्जेक्ट का टैब क्रम चलता है।

मैंने यह लंबे डेटा प्रविष्टि फॉर्म के लिए किया था, जिसके बीच में एक बटन फेंका गया था। यह एक बटन नहीं है जो लोग बहुत बार क्लिक करते हैं इसलिए मैं नहीं चाहता था कि वे गलती से उस पर टैब करें और एंटर दबाएं। disabledकाम नहीं करेगा क्योंकि यह एक बटन है।

Answer 5

"TabIndex = -1" जैसी हैक क्रोम v53 के साथ मेरे लिए काम नहीं करती है।

यह वह है जो क्रोम के लिए काम करता है, और अधिकांश ब्राउज़र:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Comments

क्या यह केवल अक्षम टैबिंग के बजाय तत्व को डिफ़ॉल्ट टैब इंडेक्स असाइन नहीं करेगा?

— वकील जूल

@Lawyerson नहीं, यह वास्तव में टैबिंग को अक्षम करता है क्योंकि यह स्वयं को हटा दिया गया है 'हटाएं'। क्या आपने इसे आजमाया है लेकिन अलग परिणाम के साथ?

— वैल

मैंने बिना किसी प्रभाव के इसे आजमाया। डिफ़ॉल्ट रूप से ब्राउज़र आपको इनपुट के माध्यम से उस क्रम में टैब करने की अनुमति देते हैं, जो पृष्ठ पर दिखाई देता है, भले ही उन पर कोई टैबइंडेक्स सेट नहीं है, इसलिए यह केवल मेरे लिए समझ में आता है कि केवल विशेषता को हटाने से वास्तव में टैबिंग पूरी तरह से अक्षम नहीं होती है। इसके अलावा, इनपुट है कि मैं इस एक का उपयोग करना चाहते हैं कोई "tabindex" विशेषता के साथ शुरू करने के लिए है।

— लॉयरसन

स्निपेट को चलाकर मैं notabindexबॉक्स को टैब कर सकता हूं जैसे tabIndex=5कि बटन दबाने के बाद। एक महापौर मुद्दा नहीं है, लेकिन अभी भी इसे पूरी तरह से "अन-टैबेबल" नहीं बनाया गया है।

— मिकेल दुई बोलिंदर

यह शायद काम नहीं कर रहा है क्योंकि आप ऊंट मामले का उपयोग कर रहे हैं। यह सब लोअरकेस में होना चाहिएtabindex

— dman

Answer 6

इसे करने का तरीका जोड़कर है tabindex="-1"। इसे एक विशिष्ट तत्व से जोड़कर, यह कीबोर्ड नेविगेशन द्वारा पहुंच से बाहर हो जाता है । यहां एक शानदार लेख है जो आपको टैबइंडेक्स को समझने में मदद करेगा ।

Answer 7

केवल disabledतत्व को विशेषता जोड़ें (या आपके लिए ऐसा करने के लिए jQuery का उपयोग करें)। अक्षम इनपुट को केंद्रित या चयनित होने से रोकता है।

Comments

क्रोम का कौन सा संस्करण?

— याकोव आइंसपैन

क्रोम 49.0.2623.75 (64 बिट)।

— फेलिक्स ईव

मेरा संस्करण 51.0.2704.103 है। की जाँच करें इस बेला । आपके पास गलत कोड हो सकता है, आप कभी नहीं जानते।

— याकोव आइंस्पैन

@ अतुलाचौधरी, यह कैसे काम नहीं करता है? आप अभी भी इसे फोकस कर सकते हैं?

— याकोव आइंस्पैन 17

एक बार फ़ील्ड अक्षम होने के बाद वे अक्षम बने रहते हैं और यह IOS9 में एक समस्या है, लेकिन IOS10 में काम करता प्रतीत होता है

— अतुल चौधरी