কোন এইচটিএমএল উপাদান ফোকাস পেতে পারে?

Question

আমি এইচটিএমএল উপাদানগুলির একটি সুনির্দিষ্ট তালিকা খুঁজছি যা ফোকাস গ্রহণের অনুমতিপ্রাপ্ত, অর্থাৎ কোন উপাদানগুলিকে যখন focus()ডাকা হবে তখন তাদের ফোকাসে রাখা হবে ?

আমি একটি জিকিউরি এক্সটেনশন লিখছি যা ফোকাসে আনা যায় এমন উপাদানগুলিতে কাজ করে। আমি আশা করি যে এই প্রশ্নের উত্তর আমাকে লক্ষ্য করে এমন উপাদানগুলির বিষয়ে সুনির্দিষ্ট হতে দেবে।

Answer 1

একটি নির্দিষ্ট তালিকা নেই, এটি ব্রাউজারের উপর নির্ভর করে। আমাদের কাছে কেবলমাত্র স্ট্যান্ডার্ডটি হ'ল ডিওএম লেভেল 2 এইচটিএমএল , যার অনুসারে একটি focus()পদ্ধতি রয়েছে এমন একমাত্র উপাদান হ'ল এইচটিএমএলপুট এলিমেন্ট, এইচটিএমএল ইলেক্টেলমেন্ট, এইচটিএমএল টেক্সটরিয়া এলিমেন্ট এবং এইচটিএমএলচেঙ্কর এলিমেন্ট। এটি উল্লেখযোগ্যভাবে এইচটিএমএল বাটন এলিমেন্ট এবং এইচটিএমএলরিএলেটমেন্টকে বাদ দেয়।

আজকের ব্রাউজারগুলি focus()এইচটিএমলেমেন্টে সংজ্ঞায়িত করেছে, তবে এটির মধ্যে একটি উপাদান না থাকলে আসলে কোনও উপাদান আসলে মনোযোগ দেবে না:

• একটি href সহ HTMLAunchorElement / HTMLAreaElement
• এইচটিএমএলপুট এলিমেন্ট / এইচটিএমএলইলেক্টিমেন্ট / এইচটিএমএল টেক্সটআরিএইলেটমেন্ট / এইচটিএমএল বাটন এলিমেন্ট সহ নয় তবে disabled(IE আপনি চেষ্টা করলে আসলে আপনাকে একটি ত্রুটি দেয়), এবং ফাইল আপলোডগুলি সুরক্ষার কারণে অস্বাভাবিক আচরণ করে
• এইচটিএমএলআইএফআরএমিলেট (যদিও এটি ফোকাস করা কোনও কার্যকর কিছু করে না)। অন্যান্য এম্বেডিং উপাদানগুলিও, সম্ভবত, আমি সেগুলি সমস্ত পরীক্ষা করি নি।
• একটি সঙ্গে কোন উপাদান tabindex

ব্রাউজারের উপর নির্ভর করে এই আচরণে অন্যান্য সূক্ষ্ম ব্যতিক্রম এবং সংযোজন হওয়ার সম্ভাবনা রয়েছে।

Comments

আমি কিছু আকর্ষণীয় ফলাফল পেয়েছি: jsfiddle.net/B7gn6 আমাকে পরামর্শ দেয় যে "ট্যাবিনডেক্স" বৈশিষ্ট্যটি কমপক্ষে ক্রোমে কাজ করার জন্য যথেষ্ট নয় ..

— জন z

যে ট্যাবিনডেক্স অ্যাট্রিবিউটটি "লেখকদের কোনও উপাদানকে ফোকাসযোগ্য বলে বিবেচনা করা উচিত কিনা তা নিয়ন্ত্রণ করতে দেয়" এইচটিএমএল 5: w3.org/TR/html5/… মানক করা হয়েছে মূলত, 0 এর মান একটি উপাদানকে ফোকাসযোগ্য করে তোলে তবে ব্রাউজারে তার ক্রমটি ছেড়ে দেয় ।

— natevw

সহ সমস্ত উপাদান element.isContentEditable === trueফোকাসযোগ্য। নোট করুন আইই -10 (11+?) ডিসপ্লে ব্লক বা টেবিল (ডিভ, স্প্যান, ইত্যাদি) দিয়ে যে কোনও উপাদানকে ফোকাস করতে পারে।

— mems

-1 এর ট্যাবিনডেক্সযুক্ত একটি উপাদান ফোকাস পদ্ধতির মাধ্যমে প্রোগ্রামগতভাবে ফোকাস পেতে পারে; এটি শুধু ট্যাব করা যাবে না।

— জেসিবিচ

… যদি না ট্যাবিনডেক্স -1 না হয়, যা ফোকাসটিকে অসম্ভব করে তোলে >> সত্য নয়, যদি ট্যাবইন্ডেক্স -1 হয়, ক্লিক করে ফোকাস করা সম্ভব তবে "ট্যাব" টিপে ফোকাস করা অসম্ভব। -1 একটি উপাদানকে ফোকাসযোগ্য করে তোলে, কেবল এটি ট্যাবিংয়ের ক্রমে যুক্ত হয় না। দেখুন: jsfiddle.net/0jz0kd1a , প্রথমে উপাদানটি ক্লিক করার চেষ্টা করুন, তারপরে ট্যাবিনডেক্সকে 0 এ পরিবর্তন করুন এবং ট্যাবটি ব্যবহার করার চেষ্টা করুন।

— daremkd

Answer 2

এখানে আমি একটি সিএসএস-নির্বাচক উপর ভিত্তি করে আছে bobince এর উত্তর কোন focusable HTML উপাদান নির্বাচন করতে:

  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 */
    }
}

আমি এটি একটি উত্তর হিসাবে যুক্ত করেছি, কারণ এটি ছিল, আমি যা খুঁজছিলাম, যখন গুগল আমাকে এই স্ট্যাকওভারফ্লো প্রশ্নটিতে পুনর্নির্দেশ করেছিল।

সম্পাদনা: আরও একজন নির্বাচক আছেন, যা মনোনিবেশযোগ্য:

[contentEditable=true]

তবে এটি খুব কমই ব্যবহৃত হয়।

Comments

@TWiStErRob - আপনার নির্বাচক @ ReeCube এর নির্বাচকদের মতো একই উপাদানগুলিকে লক্ষ্যবস্তু করে না, কারণ আপনার এমন উপাদানগুলিকে অন্তর্ভুক্ত করে না যা একটি ট্যাবিনডেক্স সুস্পষ্টভাবে সেট করে না। উদাহরণস্বরূপ <a href="foo.html">Bar</a>অবশ্যই ফোকাসযোগ্য কারণ এটি একটি aউপাদান যা একটি hrefবৈশিষ্ট্য আছে। তবে আপনার নির্বাচক এটি অন্তর্ভুক্ত করে না।

— jbyrd

@ জাইবার্ড এটি বোবিন্সের বক্তব্যের ভিত্তিতে সম্পাদনা করার জন্য কেবল একটি আহ্বান ছিল: "... যদি না ট্যাবিনডেক্স -1 না হয়, যা ফোকাসকে অসম্ভব করে তোলে।", রিকবের উত্তরটি প্রতিস্থাপন করার কথা কখনও ছিল না; সম্পাদনা ইতিহাস দেখুন।

— TWiStErRob

SASS (বা CSS) উপরের প্রশ্নের (ব্রাউজারের অসঙ্গতি বাদ দিয়ে) একটি কঠোর উত্তর সরবরাহ করার জন্য একটি উপযুক্ত ফর্ম।

— রায় টিঙ্কার

tabindex="-1"নেই না একটি উপাদান শক্তির ঘাটতি করতে, এটা ঠিক tabbing দ্বারা দৃষ্টি নিবদ্ধ করা যাবে না। এটি এখনও এতে ক্লিক করে বা প্রোগ্রামগতভাবে ফোকাস পেতে পারে HTMLElement.focus(); অন্য কোনও নেতিবাচক সংখ্যার জন্য একই same দেখুন: বিকাশকারী.মোজিলা.আর.ইন-

— লাজারো

আমি ট্যাবিনডেক্স -১ দিয়ে আইটেমগুলি বাদ দিই না। ব্যবহারকারীরা কোনও ইনপুট ডিভাইসের মাধ্যমে ফোকাস করতে সক্ষম হবেন না, তবে আপনি প্রোগ্রামিকভাবে সেট করতে এবং সেই ফোকাসটি এখনও প্রদর্শন করতে চাইতে পারেন।

— জেমস ওয়েস্টগেট

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])';

আমি সমস্ত মনোনিবেশযোগ্য উপাদানগুলির একটি এসসিএসএস তালিকা তৈরি করছি এবং আমি ভেবেছিলাম এই প্রশ্নের গুগল র‌্যাঙ্কের কারণে কারও পক্ষে এটি সহায়তা করতে পারে।

কয়েকটি বিষয় লক্ষণীয়:

• আমি পরিবর্তন :not([tabindex="-1"])করতে :not([tabindex^="-"])হয়েছে কারণ এটি পুরোপুরি বিশ্বাসযোগ্য এর জেনারেট করতে -2একরকম। দুঃখিত তুলনায় উন্নত নিরাপদ, ডান?
• যোগ করার পদ্ধতি :not([tabindex^="-"])সব অন্যান্য focusable নির্বাচকরা সম্পূর্ণভাবে অর্থহীন নয়। [tabindex]:not([tabindex^="-"])এটি ব্যবহার করার সময় ইতিমধ্যে এমন সমস্ত উপাদান অন্তর্ভুক্ত রয়েছে যা আপনি অবহেলা করছেন :not!
• আমি অন্তর্ভুক্ত করেছি :not([disabled])কারণ অক্ষম উপাদানগুলি কখনই মনোযোগ নিবদ্ধ করে না। সুতরাং আবার এটি প্রতিটি একক উপাদান যুক্ত করা অযথা।

Answer 4

Ally.js অভিগম্যতা লাইব্রেরিটি এখানে একটি বেসরকারী, পরীক্ষা-ভিত্তিক তালিকা প্রদান করে:

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

(এনবি: তাদের পৃষ্ঠায় বলা হয় না যে কতক্ষণ পরীক্ষা করা হয়েছিল doesn't)

Answer 5

সম্ভবত এটি সাহায্য করতে পারে:

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

প্রত্যাবর্তনের মান: সত্য = সাফল্য, মিথ্যা = ব্যর্থ

রেফ: https://developer.mozilla.org/en-US/docs/Web/API/DocamentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Answer 6

কীবোর্ড ইভেন্ট বা অন্যান্য ব্যবহারকারীর ইনপুট গ্রহণকারী উপাদানগুলিতে ফোকাস নির্বাচনকারীকে অনুমোদিত allowed

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

Comments

": ফোকাস" এর অর্থ উপাদানটি বর্তমানে ফোকাসযুক্ত, এটি ফোকাসযোগ্য নয়

— jwebb