कौन से HTML तत्व फोकस प्राप्त कर सकते हैं?

Question

मैं उन HTML तत्वों की एक निश्चित सूची की तलाश कर रहा हूं, जिन्हें फ़ोकस करने की अनुमति है, अर्थात उन पर ध्यान देने focus()पर किन तत्वों को फ़ोकस में रखा जाएगा ?

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

Answer 1

कोई निश्चित सूची नहीं है, यह ब्राउज़र पर निर्भर है। हमारे पास एकमात्र मानक डोम स्तर 2 एचटीएमएल है , जिसके अनुसार केवल एक focus()विधि वाले तत्व HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement और HTMLAnchorElement हैं। यह विशेष रूप से HTMLButtonElement और HTMLAreaElement को छोड़ देता है।

आज के ब्राउज़र focus()HTMLElement पर परिभाषित करते हैं, लेकिन एक तत्व वास्तव में तब तक ध्यान केंद्रित नहीं करेगा जब तक कि इसमें से एक:

• HTMLAnchorElement / HTMLAreaElement एक href के साथ
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement, लेकिन नहीं disabled(IE वास्तव में यदि आप कोशिश करें तो आपको एक त्रुटि देता है), और सुरक्षा कारणों से फ़ाइल अपलोड करने का असामान्य व्यवहार है
• HTMLIFrameElement (हालांकि यह ध्यान केंद्रित करने से कुछ उपयोगी नहीं होता है)। अन्य एम्बेडिंग तत्व भी, शायद, मैंने उन सभी का परीक्षण नहीं किया है।
• किसी भी तत्व के साथ ए tabindex

ब्राउज़र के आधार पर इस व्यवहार के अन्य सूक्ष्म अपवाद और परिवर्धन होने की संभावना है।

Comments

मुझे कुछ दिलचस्प परिणाम मिले: jsfiddle.net/B7gn6 मुझे सुझाव देता है कि "टैबइंडेक्स" अट्रिब कम से कम क्रोम में काम करने के लिए पर्याप्त नहीं है ..

— जॉन z

यह tabindex विशेषता "लेखकों को यह नियंत्रित करने की अनुमति देता है कि क्या एक तत्व को ध्यान देने योग्य माना जाता है" HTML5 में मानकीकृत है: w3.org/TR/html5/… मूल रूप से, 0 का मान तत्व को ध्यान देने योग्य बनाता है, लेकिन ब्राउज़र तक इसके आदेश को छोड़ देता है ।

— 22

सभी तत्व ध्यान देने element.isContentEditable === trueयोग्य हैं। ध्यान दें कि IE -10 (11+?) डिस्प्ले ब्लॉक या टेबल (डि, स्पैन आदि) के साथ किसी भी तत्व को फोकस कर सकता है।

— एमईएमएस

-1 के टैब के साथ एक तत्व फोकस विधि के माध्यम से प्रोग्रामेटिक रूप से फोकस प्राप्त कर सकता है; इसे अभी टैब नहीं किया जा सकता है।

— 23

... जब तक टैबइंडेक्स -1 नहीं है, जो फोकस को असंभव बनाता है >> सच नहीं है, अगर टैबइंडेक्स -1 है, तो CLICKING द्वारा ध्यान केंद्रित करना संभव है, लेकिन "टैब" दबाकर ध्यान केंद्रित करना असंभव है। -1 एक तत्व को ध्यान देने योग्य बनाता है, बस इसे टैबिंग क्रम में नहीं जोड़ा जाता है। देखें: jsfiddle.net/0jz0kd1a , पहले तत्व को क्लिक करने का प्रयास करें, फिर टैबइंडेक्स को 0 में बदलें और टैब का उपयोग करने का प्रयास करें।

— daremkd

Answer 2

यहाँ मेरे पास सीएसएस-चयनकर्ता है जो किसी भी ध्यान देने योग्य एचटीएमएल तत्व का चयन करने के लिए बॉबिन के उत्तर पर आधारित है :

  a[href]:not([tabindex='-1']),
  area[href]:not([tabindex='-1']),
  input:not([disabled]):not([tabindex='-1']),
  select:not([disabled]):not([tabindex='-1']),
  textarea:not([disabled]):not([tabindex='-1']),
  button:not([disabled]):not([tabindex='-1']),
  iframe:not([tabindex='-1']),
  [tabindex]:not([tabindex='-1']),
  [contentEditable=true]:not([tabindex='-1'])
  {
      /* your CSS for focusable elements goes here */
  }

या SASS में थोड़ा और सुंदर:

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
    &:not([tabindex='-1'])
    {
        /* your SCSS for focusable elements goes here */
    }
}

मैंने इसे एक उत्तर के रूप में जोड़ा है, क्योंकि वह वही था, जिसकी मुझे तलाश थी, जब Google ने मुझे इस Stackoverflow प्रश्न पर पुनर्निर्देशित किया।

संपादित करें: एक और चयनकर्ता है, जो ध्यान देने योग्य है:

[contentEditable=true]

हालांकि, यह बहुत कम ही उपयोग किया जाता है।

Comments

@TWiStErRob - आपका चयनकर्ता @ ReeCube के चयनकर्ताओं के समान तत्वों को लक्षित नहीं करता है, क्योंकि आपके पास ऐसे तत्व शामिल नहीं हैं जिनमें स्पष्ट रूप से एक टैबइंडेक्स सेट नहीं है। उदाहरण के लिए <a href="foo.html">Bar</a>निश्चित रूप से ध्यान देने योग्य है क्योंकि यह एक aतत्व है जिसमें एक hrefविशेषता है। लेकिन आपके चयनकर्ता में यह शामिल नहीं है।

— jbyrd

@ जाइबर्ड जो बोबिन्स के कथन के आधार पर संपादित करने के लिए सिर्फ एक कॉल था: "... जब तक कि टैबइंडेक्स -1 नहीं है, जो फोकस को असंभव बनाता है।", यह रीब्यूब के जवाब को बदलने के लिए कभी नहीं माना गया था; संपादित इतिहास देखें।

— TWIStErRob

SASS (या CSS) उपर्युक्त प्रश्न (ब्राउज़र असंगतताओं को रोकना) का कठोर उत्तर देने के लिए एक उपयुक्त रूप है।

— रॉय टिंकर

tabindex="-1"करता नहीं एक तत्व unfocusable बनाने, यह सिर्फ टैब करके ध्यान केंद्रित नहीं किया जा सकता। यह अभी भी उस पर क्लिक करके या प्रोग्रामेटिक रूप से फोकस प्राप्त कर सकता है HTMLElement.focus(); किसी भी अन्य नकारात्मक संख्या के लिए समान। देखें: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— लेज़ारो

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

— जेम्स वेस्टगेट

Answer 3

$focusable:
  'a[href]',
  'area[href]',
  'button',
  'details',
  'input',
  'iframe',
  'select',
  'textarea',

  // these are actually case sensitive but i'm not listing out all the possible variants
  '[contentEditable=""]',
  '[contentEditable="true"]',
  '[contentEditable="TRUE"]',

  '[tabindex]:not([tabindex^="-"])',
  ':not([disabled])';

मैं सभी ध्यान देने योग्य तत्वों की एक SCSS सूची बना रहा हूं और मुझे लगा कि इस प्रश्न के Google रैंक के कारण यह किसी की मदद कर सकता है।

ध्यान देने योग्य कुछ बातें:

• मैं बदल :not([tabindex="-1"])गया :not([tabindex^="-"])क्योंकि यह पूरी तरह से उत्पन्न करने के लिए प्रशंसनीय है-2 किसी भी तरह । माफ करना सही से बेहतर सुरक्षित है?
• :not([tabindex^="-"])अन्य सभी ध्यान देने योग्य चयनकर्ताओं को जोड़ना पूरी तरह से व्यर्थ है। [tabindex]:not([tabindex^="-"])इसका उपयोग करते समय पहले से ही उन सभी तत्वों को शामिल किया जाता है, जिनके साथ आप उपेक्षा करेंगे :not!
• मैंने शामिल किया :not([disabled])क्योंकि अक्षम तत्व कभी ध्यान देने योग्य नहीं हो सकते । इसलिए फिर से इसे हर एक तत्व में जोड़ना बेकार है।

Answer 4

Ally.js पहुंच लाइब्रेरी यहां एक अनौपचारिक, परीक्षण के आधार पर सूची प्रदान करता है:

https://allyjs.io/data-tables/focusable.html

(NB: उनका पृष्ठ यह नहीं कहता है कि कितनी बार परीक्षण किए गए थे।)

Answer 5

शायद यह एक मदद कर सकता है:

function focus(el){
	el.focus();
	return el==document.activeElement;
}

वापसी मूल्य: सच = सफलता, गलत = विफल

Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Answer 6

: फोकस चयनकर्ता को उन तत्वों पर अनुमति दी जाती है जो कीबोर्ड ईवेंट या अन्य उपयोगकर्ता इनपुट को स्वीकार करते हैं।

http://www.w3schools.com/cssref/sel_focus.asp

Comments

"फोकस" का अर्थ है कि तत्व वर्तमान में केंद्रित है, ऐसा नहीं है कि यह ध्यान देने योग्य है

— jwebb