एट्रिब्यूट tabindex
एट्रिब्यूट tabindex Tab कुंजी का उपयोग करके तत्वों के बीच नेविगेट करते समय
फोकस प्राप्त करने का क्रम निर्धारित करता है।
इस कुंजी को दबाकर पृष्ठ के कुछ तत्वों को क्रमिक रूप से सक्रिय किया जा सकता है (लिंक और फॉर्म के तत्व)। सक्रिय तत्व इनपुट फोकस प्राप्त करेंगे।
input
और textarea
प्रकार के इनपुट फ़ील्ड के लिए
फोकस इस तरह व्यक्त होगा कि फ़ील्ड में
कर्सर ब्लिंक करेगा और उसमें
टेक्स्ट दर्ज किया जा सकेगा, लिंक
और अन्य तत्वों के लिए यह
किसी तरह से हाइलाइटिंग होगी (अंडरलाइन,
डॉटेड बॉर्डर से घेरना आदि, ब्राउज़र पर निर्भर करता है)।
यदि फोकस प्राप्त करने के समय तत्व पृष्ठ पर दिखाई नहीं दे रहा था (स्क्रॉलिंग के कारण), तो पृष्ठ उस तत्व तक स्क्रॉल हो जाएगा।
यदि तत्वों को tabindex एट्रिब्यूट निर्दिष्ट नहीं किया गया है
या इसका मान 0 है, तो Tab कुंजी द्वारा उनके बीच नेविगेशन
HTML कोड में तत्वों के क्रम के अनुसार होगा।
यदि पृष्ठ पर ऐसे तत्व हैं जिन्हें tabindex
निर्दिष्ट किया गया है, तो नेविगेशन सबसे पहले
उन पर होगा, एट्रिब्यूट tabindex के छोटे मान
(सबसे छोटा मान एक हो सकता है) से शुरू होकर बढ़ते क्रम में
चलते हुए, और जब ऐसे तत्व समाप्त हो जाएंगे - तो नेविगेशन उन तत्वों पर चलेगा,
जिन्हें tabindex निर्दिष्ट नहीं किया गया है या जिनका मान 0 है।
एट्रिब्यूट का मान 1 से लेकर अनंत तक के पूर्णांक होते हैं।
यदि कुछ नंबर छूट जाते हैं - तो कोई बड़ी बात नहीं होती
(उदाहरण के लिए, यदि कोई नंबर 2 नहीं है, तो
पहले फोकस tabindex 1 वाले तत्व पर जाएगा,
और फिर tabindex 3 वाले तत्व पर जाएगा)।
यदि Tab कुंजी दबाने के समय पृष्ठ पर कोई तत्व फोकस में है (फोकस
केवल Tab दबाने से ही नहीं, बल्कि तत्व पर माउस क्लिक करने या
autofocus एट्रिब्यूट द्वारा भी
प्राप्त किया जा सकता है),
तो Tab कुंजी का अगला दबाव
इस बात का कारण बनेगा कि फोकस में मौजूद तत्व के बाद वाले क्रम के
तत्व को फोकस प्राप्त हो जाएगा (उदाहरण के लिए,
यदि वर्तमान में फोकस tabindex 3 वाले तत्व पर है,
तो अगला फोकस tabindex 4 वाले तत्व को प्राप्त होगा)।
यदि किसी इनपुट फ़ील्ड को disabled
एट्रिब्यूट निर्दिष्ट किया गया है,
तो Tab कुंजी के माध्यम से होने वाले नेविगेशन द्वारा इसे अनदेखा कर दिया जाएगा,
भले ही इस फ़ील्ड को tabindex एट्रिब्यूट निर्दिष्ट किया गया हो।
tabindex एट्रिब्यूट निम्नलिखित टैग्स पर लागू होता है:
a,
input,
textarea,
button,
select,
area.
उदाहरण
आइए इनपुट को
tabindex एट्रिब्यूट निर्दिष्ट करें।
Tab कुंजी को क्रमिक रूप से दबाएं और आप देखेंगे
कि इनपुट फोकस पहले इनपुट से चौथे इनपुट पर कैसे जाता है,
और फिर पृष्ठ की शुरुआत से लिंक पर चला जाएगा
(क्योंकि tabindex एट्रिब्यूट वाले और कोई तत्व नहीं बचे हैं):
<input type="text" tabindex="3" placeholder="संख्या: 3">
<input type="text" tabindex="1" placeholder="संख्या: 1">
<input type="text" tabindex="2" placeholder="संख्या: 2">
<input type="text" tabindex="4" placeholder="संख्या: 4">
:
यह भी देखें
-
स्यूडोक्लास
focus,
जो फोकस में मौजूद तत्व की स्टाइल बदलने की अनुमति देता है
