31
वेब पेज टैबबड होने पर tabindex 0 के मान वाले तत्व किस क्रम में हैं?टैबिंडेक्स = "0" HTML तत्व टैबबिंग ऑर्डर में कहां समाप्त होते हैं?
A
उत्तर
29
HTML specification कहता है:
तत्वों समान tabindex है मूल्यों क्रम में वे चरित्र स्ट्रीम में प्रकट में नेविगेट किया जाना चाहिए।
+3
चरित्र धारा का क्या अर्थ है? – HELP
+4
अक्षरों का एक अनुक्रम। –
+6
@snufey, जिस क्रम में वे दस्तावेज़ (x) एचटीएमएल मार्क-अप में दिखाई देते हैं, उतना ही अच्छा है जितना कि किसी भी तरह की व्याख्या। इसलिए समान 'tabindex' मानों के दो तत्व पहले मार्क-अप में दिखाई देने वाले पहले पर ध्यान केंद्रित करेंगे, और फिर अगले पर जाएं (लेकिन याद रखें कि पृष्ठ पर ऑर्डर * चिह्न के क्रम में * ऊपर, सीएसएस के कारण)। –
22
यह एलन हैगई अलवी के उत्तर से थोड़ा अधिक जटिल है।
पार्सिंग के बाद, आईई 8 और ओपेरा HTML4 spec के रूप में करते हैं। फ़ायरफ़ॉक्स और क्रोम हालांकि डीओएम आदेश का उपयोग करें। यह इस तरह विकृत मार्कअप के साथ मायने रखता है।
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test case 1</title>
</head>
<body>
<form>
<table>
<tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
<div><input id="second" value="second in the character stream" tabindex="0"></div>
</table>
<form>
</body>
</html>
आप अच्छी तरह से तर्क दे सकते हैं कि विकृत मार्क-अप के साथ सभी दांव किसी भी तरह से बंद हैं, तो जावास्क्रिप्ट के बारे में क्या? जब कोई उपयोगकर्ता "चाल", IE8, फ़ायरफ़ॉक्स, क्रोम और ओपेरा सभी उपयोग डोम आदेश, नहीं चरित्र धारा आदेश पर क्लिक करता है
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test case 2</title>
<script type="text/javascript">
moveFirst = function()
{
var f = document.getElementById("first");
f.parentNode.removeChild(f);
document.body.appendChild(f);
}
</script>
</head>
<body>
<form>
<table>
<tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
<tr><td><div><input id="second" value="second in the character stream" tabindex="0"></div></td></tr>
</table>
<form>
<div onclick="moveFirst()">move</div>
</body>
</html>
इस मामले में,:
इस मामले पर विचार करें।
अंत में HTML5 0 के टैबिंडेक्स वाले तत्वों के बीच टैब ऑर्डर के बारे में बहुत अधिक गारंटी नहीं देता है, केवल यह बताते हुए कि इसे प्लेटफॉर्म सम्मेलनों का पालन करना चाहिए।
73
tabindex कार्य निम्नलिखित रास्ता (तत्वों कि tabindex गुण का समर्थन के लिए) नियंत्रित किया जाता है:
- सकारात्मक संख्या (1,2,3 ... 32767) टैब क्रम में नियंत्रित किया जाता है।
- 0 स्रोत क्रम में क्रमबद्ध किया जाता है (डीओएम में यह ऑर्डर दिखाई देता है)
- -1 टैबबिंग के दौरान अनदेखा किया जाता है लेकिन ध्यान केंद्रित किया जाता है।
यह जानकारी से लिया जाता है: http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
+5
बस जोर देने के लिए - सकारात्मक संख्याओं को पहले संभाला जाता है, फिर 0 के टैबिंडेक्स वाले तत्व और बिना टैबिडेक्स वाले स्रोत टैबबल तत्व (स्रोत क्रम में)। – gpr
+1
साफ़ और गर्भ धारण करें। यह स्वीकार्य उत्तर होना चाहिए। – nachtigall
+0
भाग "तत्वों के लिए जो 'tabindex' विशेषता का समर्थन करते हैं" पूरी तरह से स्पष्ट नहीं है, जैसा वर्तमान HTML विनिर्देशों में है (WHATWG: https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute) इसे वैश्विक विशेषता के रूप में परिभाषित किया गया है और केवल ऐतिहासिक रूप से ब्राउज़र (फी इंटरनेट एक्सप्लोरर) ने इसे गैर-इंटरैक्टिव तत्वों पर ध्यान में नहीं रखा है। –
0
tabindex="0" ऐसे URL पता बार के रूप में वेब ब्राउज़र के गैर पृष्ठ तत्वों, पर टैब शामिल कर सकते हैं।
फ़ायरफ़ॉक्स 32.03 के लिए केस होने का परीक्षण किया गया।
ध्यान देने योग्य मूल्य- मेरे परीक्षण tabindex = "0" में तत्व – Kip
पर एक टैबिंडेक्स नहीं है जैसा कि एक अंतर है कि tabindex = "0" बनाता है वह तत्व जो आमतौर पर टैब-सक्षम नहीं हो सकते हैं tabindex = "0" जोड़कर टैब-सक्षम बनाया गया, विडंबना यह है कि वास्तव में उनके लिए एक टैब इंडेक्स निर्दिष्ट किए बिना। – Nat