HTML tabindex विशेषता क्या है?

Question

tabindexHTML में किस विशेषता का उपयोग किया जाता है?

Answer 1

tabindexएक वैश्विक विशेषता है जो दो चीजों के लिए जिम्मेदार है:

1. यह "फ़ोकस करने योग्य" तत्वों का क्रम निर्धारित करता है और
2. यह तत्वों को "फोकस करने योग्य" बनाता है ।

मेरे दिमाग में दूसरी बात पहले वाले से भी ज्यादा महत्वपूर्ण है। बहुत कम तत्व ऐसे होते हैं जो डिफ़ॉल्ट रूप से ध्यान देने योग्य होते हैं (उदाहरण के लिए <a> और प्रपत्र नियंत्रण)। डेवलपर अक्सर ध्यान देने योग्य तत्वों (<div>, <span> और इसी तरह) पर कुछ जावास्क्रिप्ट ईवेंट हैंडलर (जैसे 'ऑनक्लिक') जोड़ते हैं, और आपके इंटरफ़ेस को बनाने का तरीका न केवल माउस ईवेंट के लिए बल्कि कीबोर्ड ईवेंट के लिए भी उत्तरदायी होता है। (जैसे 'ऑनकीप्रेस') ऐसे तत्वों को फ़ोकस करने योग्य बनाना है। अंत में, यदि आप ऑर्डर सेट नहीं करना चाहते हैं, लेकिन tabindex="0"ऐसे सभी तत्वों पर अपना ध्यान केंद्रित करने का उपयोग करें :

<div tabindex="0"></div>

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

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Comments

मुझे पता चला कि <div tabindex>यह भी काम करता है। क्या इसका उपयोग न करने का कोई कारण है?

— दानिश

-1 के टैबइंडेक्स का उपयोग करना स्किप लिंक जैसी चीजों के लिए सुविधाजनक है। आप उस सामग्री से कुछ ऊपर एक आइटम लिंक बना सकते हैं जिसे आप उपयोगकर्ता से लिंक करने की कोशिश कर रहे हैं, बिना लिंक किए हुए आइटम स्वयं पहुंच योग्य नहीं है।

— ब्रेट

वर्थ नोटिंग - और उत्तर को शायद सही किया जाना चाहिए - कि मूल्य -1उपयुक्त नहीं है जब आप "इसे फोकस नहीं करना चाहते हैं", बल्कि जब आप कीबोर्ड नेविगेशन के परिणामस्वरूप फोकस को रोकना चाहते हैं। तत्व अभी भी ध्यान केंद्रित किया जा सकता है, बस कीबोर्ड के साथ नहीं।

— एमएन

@danijar हाँ: यह एक विशेष उल्लंघन है। प्रति HTML.spec.whatwg.org/multipage/… , " टैबिंडेक्स विशेषता, यदि निर्दिष्ट किया गया है, तो एक मान होना चाहिए जो एक वैध पूर्णांक है" ।

— मार्क अमेरी

यह -1उन वस्तुओं के समाधान के लिए मेरे शोध का अंत है जिनकी एक पूर्ण स्थिति थी और जब टैब द्वारा ध्यान केंद्रित किया जाता है, तो मज़ेदार व्यवहार करते हैं! HOorraaayyyyy।

— जॉन मुतुमा

Answer 2

जब उपयोगकर्ता टैब बटन दबाता है तो उपयोगकर्ता को फॉर्म 1, 2, और 3 में फॉर्म के माध्यम से लिया जाएगा जैसा कि नीचे दिए गए उदाहरण में दिया गया है।

उदाहरण के लिए:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

Comments

-> क्या है अगर टैलिंडेक्स -1 है? इसका क्या मतलब है?

@AlyssaGono आपको लगता है कि आपने 85 upvotes के साथ उत्तर नहीं पढ़ा है ... टैब -1 का टैब का अर्थ है कि आप टैब बटन दबाने के साथ उस तत्व तक नहीं पहुंच सकते हैं

— जॉन रुडेल

Answer 3

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

टैबइंडेक्स सामग्री विशेषता लेखकों को यह नियंत्रित करने की अनुमति देती है कि क्या किसी तत्व को ध्यान देने योग्य माना जाना चाहिए, क्या यह अनुक्रमिक फ़ोकस नेविगेशन का उपयोग करके पहुंच योग्य होना चाहिए, और अनुक्रमिक फ़ोकस नेविगेशन के प्रयोजनों के लिए तत्व का सापेक्ष क्रम क्या होना चाहिए। "टैब इंडेक्स" नाम "टैब" कुंजी के सामान्य उपयोग से ध्यान देने योग्य तत्वों के माध्यम से नेविगेट करने के लिए आता है। शब्द "टैबिंग" ध्यान देने योग्य तत्वों के माध्यम से आगे बढ़ने को संदर्भित करता है जो अनुक्रमिक फोकस नेविगेशन का उपयोग करके पहुंचा जा सकता है।
डब्ल्यू 3 सी सिफारिश: एचटीएमएल 5
खंड 7.4.1 अनुक्रमिक फोकस नेविगेशन और टैबइंडेक्स विशेषता

tabindex0 पर शुरू होता है या किसी धनात्मक पूर्णांक और वेतन वृद्धि ऊपर की ओर। मान 0 से बचने के लिए यह देखना आम है क्योंकि मोज़िला और IE के पुराने संस्करणों में, tabindex 1 से शुरू होगा, 2 पर जाएगा, और 2 के बाद ही यह 0 पर जाएगा और फिर 3. इसके लिए अधिकतम पूर्णांक मान tabindexहै 32767। यदि तत्व समान हैं tabindexतो टैबइंडेक्स मार्कअप में स्रोत क्रम से मेल खाएगा। एक नकारात्मक मान टैब इंडेक्स से तत्व को हटा देगा इसलिए इसे कभी भी फोकस नहीं किया जाएगा।

यदि कोई तत्व असाइन किया गया है tabindex, तो -1यह तत्व को हटा देगा और यह कभी भी फ़ोकस करने योग्य नहीं होगा, लेकिन प्रोग्राम का उपयोग करके प्रोग्राम पर ध्यान दिया जा सकता है element.focus()।

यदि आप tabindexविशेषता को बिना किसी मूल्य या खाली मान के निर्दिष्ट करते हैं तो इसे अनदेखा कर दिया जाएगा।

यदि disabledविशेषता एक तत्व पर सेट है जिसमें एक है tabindex, तो तत्व को अनदेखा किया जाएगा।

---

यदि tabindexपृष्ठ के भीतर कहीं भी सेट किया गया है, भले ही वह शेष कोड के संबंध में हो (यह पाद लेख, सामग्री क्षेत्र, जहाँ-कभी हो सकता है) यदि कोई परिभाषित है tabindexतो तत्व पर टैब क्रम शुरू होगा जिसे स्पष्ट रूप से सबसे कम tabindexमान दिया गया है 0. यह परिभाषित तत्वों के माध्यम से चक्र करेगा और केवल स्पष्ट tabindexतत्वों के माध्यम से टैब किए जाने के बाद , क्या यह दस्तावेज़ की शुरुआत में वापस आएगा और प्राकृतिक टैब क्रम का पालन करेगा।

---

HTML4 कल्पना में केवल निम्नलिखित तत्व टैबइंडेक्स विशेषता का समर्थन करते हैं: लंगर, क्षेत्र, बटन, इनपुट, वस्तु, चुनते हैं, तथा पाठ क्षेत्र। लेकिन HTML5 युक्ति, पहुंच को ध्यान में रखते हुए, सभी तत्वों को असाइन करने की अनुमति देता है tabindex।

-

उदाहरण के लिए

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

के समान है

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

इस तथ्य की परवाह किए बिना कि वे सभी असाइन किए गए हैं tabindex="1", वे अभी भी उसी आदेश का पालन करेंगे, पहला एक पहले है, और आखिरी आखिरी है। यह भी वही है ।।

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

क्योंकि डिफ़ॉल्ट रूप से व्यवहार करने पर आपको टैबइंडेक्स को स्पष्ट रूप से परिभाषित करने की आवश्यकता नहीं है। एक divडिफ़ॉल्ट रूप से फ़ोकस करने योग्य नहीं होगा, anchorटैग होगा।

Comments

IE और मोज़िला के कौन से संस्करण 0 के बजाय 1tabindex पर शुरू होते हैं ?

— अर्मिनरोस्कु

-1; यह उत्तर थोड़ा उलझन में है। आप उल्लेख करते हैं कि IE और फ़ायरफ़ॉक्स के "पुराने संस्करणों" को टैबइंडेक्स 0 के बजाय टैबइंडेक्स 1 पर शुरू करना है ... लेकिन यह है कि सभी ब्राउज़र क्या करते हैं, जैसा कि कल्पना से आवश्यक है! आप स्वयं भी विरोधाभास करते हैं, पहले " tabindex0 पर शुरू होता है " कहते हुए लेकिन फिर बाद में "टैब ऑर्डर उस तत्व पर शुरू होगा जो स्पष्ट रूप tabindexसे 0 से ऊपर सबसे कम मान असाइन किया गया है " ।

— मार्क अमेरी

Answer 4

tabपृष्ठ के भीतर टैबिंग ( फोकस को स्थानांतरित करने के लिए कुंजी दबाकर ) के क्रम को नियंत्रित करना ।

संदर्भ: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

Comments

इसके अलावा, टैबइंडेक्स होने से माउस क्लिक द्वारा एक तत्व का चयन किया जा सकता है। (जोड़ता है बिंदीदार रूपरेखा, का उपयोग करके स्टाइल किया जा सकता है :focus)

— user123444555621

@ Pumbaa80 आप वैसे भी माउस क्लिक द्वारा किसी भी इनपुट तत्व का चयन कर सकते हैं, और वही ": फोकस" सीएसएस का उपयोग करने के लिए जाता है। टैबइंडेक्स विशेषता वैकल्पिक है।

— ड्रू

यह केवल इनपुट तत्वों के लिए जाता है। मेरी टिप्पणी किसी भी प्रकार के तत्व पर लागू होती है। उदाहरण के लिए jsfiddle.net/XsYCj देखें ।

— user123444555621

Answer 5

आपके द्वारा निर्धारित मान उस आदेश को निर्धारित करते हैं जो आपका कीबोर्ड फ़ोकस वेबसाइट पर मौजूद तत्वों के बीच जाएगा।

निम्नलिखित उदाहरण में, पहली बार जब आप टैब दबाते हैं, तो आपका कर्सर #foo पर जाएगा, फिर # बहुत, फिर # बार

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

यदि आपने टैब इंडेक्स को कहीं भी परिभाषित नहीं किया है, तो कीबोर्ड फ़ोकस उस पृष्ठ के HTML टैग का पालन करेगा, जिस क्रम में वे HTML दस्तावेज़ में परिभाषित हैं।

यदि आप अपने द्वारा निर्दिष्ट टैबइंडेक्स की तुलना में अधिक बार टैब करते हैं, तो ध्यान इस ओर जाएगा कि कोई टैबइंडेक्स नहीं थे, यानी HTML टैग्स के दिखने के क्रम में

Answer 6

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

तो अगर आपको मिल गया है:

text input A

text input B

submit button C

टैब कुंजी का उपयोग करके आप A-> B-> C के माध्यम से नेविगेट करते हैं। Tabindex आपको उस प्रवाह को बदलने की अनुमति देता है।

Answer 7

आम तौर पर, जब उपयोगकर्ता किसी फ़ील्ड में फ़ील्ड से फ़ील्ड में टैब करता है (ब्राउज़र में जो टैबिंग की अनुमति देता है, सभी ब्राउज़र नहीं करते हैं) आदेश वह क्रम है जो फ़ील्ड HTML कोड में दिखाई देते हैं।

हालाँकि, कभी-कभी आप टैब ऑर्डर को थोड़ा अलग तरीके से प्रवाहित करना चाहते हैं। उस स्थिति में, आप TABINDEX का उपयोग करके फ़ील्ड को नंबर कर सकते हैं। तब टैब सबसे कम TABINDEX से उच्चतम तक क्रम में प्रवाहित होता है।

इस पर अधिक जानकारी यहाँ w3 पाया जा सकता है

एक और अच्छा चित्रण यहाँ पाया जा सकता है

Answer 8

सरल शब्दों में, tabindexतत्वों पर ध्यान केंद्रित करने के लिए उपयोग किया जाता है। सिंटेक्स: tabindex="numeric_value" यह numeric_valueतत्व का वजन है। पहले कम मूल्य पर पहुँचा जाएगा।

Comments

"कम मूल्य पहले पहुँचा जाएगा।" - बिल्कुल सच नहीं है; 0 और नकारात्मक मानों के विशेष अर्थ हैं।

— मार्क अमेरी

Answer 9

एचटीएमएल टैबइंडेक्स एट्रीब्यूट यह इंगित करने के लिए जिम्मेदार है कि क्या कोई तत्व कीबोर्ड नेविगेशन द्वारा उपलब्ध है । जब उपयोगकर्ता टैब कुंजी दबाता है तो फोकस एक तत्व से दूसरे में स्थानांतरित हो जाता है । टैबइंडेक्स एट्रीब्यूशन का उपयोग करके, टैब ऑर्डर फ्लो को स्थानांतरित कर दिया जाता है।

Answer 10

नियंत्रण के माध्यम से टैबिंग आमतौर पर क्रमिक रूप से होता है क्योंकि वे HTML कोड पर दिखाई देते हैं।

टैबइंडेक्स का उपयोग करते हुए, टैबिंग सबसे कम टैबइंडेक्स के साथ नियंत्रण से प्रवाहित हो जाएगा और टैबइंडेक्स अनुक्रमिक क्रम में उच्चतम टैबइंडेक्स के साथ नियंत्रण में आ जाएगा