এইচটিএমএল ট্যাবিনডেক্স বৈশিষ্ট্যটি কী?


229

tabindexএইচটিএমএল এর জন্য কী কী বৈশিষ্ট্য ব্যবহৃত হয়?

উত্তর:


301

tabindexদুটি জিনিস জন্য দায়ী একটি বিশ্বব্যাপী গুণাবলী :

  1. এটি "ফোকাসযোগ্য" উপাদানগুলির ক্রম নির্ধারণ করে এবং
  2. এটি উপাদানগুলিকে "ফোকাসযোগ্য" করে তোলে

আমার মনে দ্বিতীয় জিনিসটি প্রথমটির চেয়েও বেশি গুরুত্বপূর্ণ। ডিফল্টরূপে ফোকাসযোগ্য এমন খুব কম উপাদান রয়েছে (যেমন <a> এবং ফর্ম নিয়ন্ত্রণ)) বিকাশকারীরা খুব ঘন ঘন কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার যুক্ত করে (যেমন 'অনক্লিক') তেমন ফোকাসযোগ্য উপাদানগুলিতে (<div>, <span> এবং তেমন) এবং আপনার ইন্টারফেসটি কেবল মাউস ইভেন্টগুলিতে নয় কীবোর্ড ইভেন্টগুলিতে প্রতিক্রিয়াশীল করে তোলার উপায় (যেমন 'অ্যানকিপ্রেস') হ'ল এই জাতীয় উপাদানগুলি ফোকাসযোগ্য। শেষ অবধি, আপনি যদি অর্ডার সেট করতে না চান তবে tabindex="0"এই জাতীয় উপাদানগুলিতে আপনার উপাদানটিকে ফোকাসযোগ্য ব্যবহার করুন:

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

এছাড়াও, আপনি যদি ট্যাব কী এর মাধ্যমে ফোকাসযোগ্য হতে না চান তবে ব্যবহার করুন tabindex="-1"। উদাহরণস্বরূপ, ট্র্যাভার্সে ট্যাব কীগুলি ব্যবহার করার সময় নীচের লিঙ্কটি কেন্দ্রীভূত হবে না।

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

2
আমি খুঁজে পেয়েছি যে <div tabindex>কাজ করে। এটি ব্যবহার না করার কোনও কারণ আছে কি?
দানিজার

5
-1 এর ট্যাবিনডেক্সটি স্কিপ লিঙ্কগুলির মতো জিনিসগুলির পক্ষে সুবিধাজনক। আপনি যে আইটেমের সাথে লিঙ্কযুক্ত না হয়ে নিজেই পৌঁছনীয় হতে পারে সেটির উপরে আপনি যে লিঙ্কটি ব্যবহারকারীকে লিঙ্ক করার চেষ্টা করছেন তার ঠিক উপরে কোনও আইটেমের লিঙ্ক তৈরি করতে পারেন।
ব্রেট

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

2
@ দানিজার হ্যাঁ: এটি একটি নির্দিষ্ট লঙ্ঘন। প্রতি এইচটিএমএল.স্পেক.কিট.জি.ইউইউইউজিআআআর / মাল্টিপেজ/২ , "ট্যাবইন্ডেক্স অ্যাট্রিবিউট, যদি নির্দিষ্ট করা থাকে তবে অবশ্যই একটি মান অবশ্যই একটি বৈধ পূর্ণসংখ্যা"
মার্ক অ্যামেরি

যে -1আইটেম জন্য একটি সমাধান যে একটি পরম অবস্থান ছিল আমার গবেষণা ও অদ্ভুতভাবে আচরণ ট্যাবের দ্বারা নিবদ্ধ যখন শেষ নেই! HOorraaayyyyy।
জন মুটোমা

54

ব্যবহারকারী যখন ট্যাব বোতাম টিপেন তখন ব্যবহারকারী নীচের উদাহরণে নির্দেশিত হিসাবে 1, 2 এবং 3 ক্রমে ফর্মের মাধ্যমে নেওয়া হবে।

উদাহরণ স্বরূপ:

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

-> ট্যাবিনডেক্স -1 হলে কী হবে? এর মানে কী?

7
@ অ্যালিসাগানো আপনি 85 টি উপন্যাসের সাথে উত্তরটি পড়েন নি বলে মনে হচ্ছে ... -1 এর ট্যাবিনডেক্সের অর্থ আপনি ট্যাব বোতামটি টিপে সেই উপাদানটিতে পৌঁছাতে পারবেন না
জন রুডেল

24

দ্য ব্যবহারকারীরা যখন কোনও পৃষ্ঠাতে নেভিগেট করতে ট্যাব কী ব্যবহার করেন তখন অনুসরণ করে এমন ক্রম সংজ্ঞায়িত করতে ব্যবহৃত হয়। ডিফল্টরূপে, প্রাকৃতিক ট্যাবিং অর্ডারটি মার্কআপে উত্স ক্রমের সাথে মিলবে।

ট্যাবিনডেক্স সামগ্রীর বৈশিষ্ট্যটি লেখককে নিয়ন্ত্রণ করতে দেয় যে কোনও উপাদানকে ফোকাসযোগ্য বলে বিবেচনা করা হচ্ছে কিনা, সিক্যুয়াল ফোকাস নেভিগেশন ব্যবহার করে এটি পৌঁছনীয় হবে কিনা এবং সিক্যুয়ালি ফোকাস নেভিগেশনের উদ্দেশ্যে উপাদানটির আপেক্ষিক ক্রম কী হবে control "ট্যাব সূচক" নামটি ফোকাসযোগ্য উপাদানগুলির মাধ্যমে নেভিগেট করতে "ট্যাব" কী এর সাধারণ ব্যবহার থেকে আসে। "ট্যাবিং" শব্দটি ক্রমবর্ধমান ফোকাস নেভিগেশন ব্যবহার করে পৌঁছানো যায় এমন ফোকাসযোগ্য উপাদানগুলির মধ্য দিয়ে এগিয়ে যাওয়া বোঝায়। ডাব্লু
3 সি প্রস্তাবনা: এইচটিএমএল 5
বিভাগ 7.4.1 সিক্যুয়াল ফোকাস নেভিগেশন এবং ট্যাবিনডেক্স বৈশিষ্ট্য

tabindex0 এ শুরু বা কোন ইতিবাচক পূর্ণ সংখ্যা এবং বাড়তি উর্ধ্বগামী। মান 0 টি এড়ানো সাধারণভাবে দেখা যায় কারণ মোজিলা এবং আইআই এর পুরানো সংস্করণগুলিতে ট্যাবিনডেক্সটি 1 থেকে শুরু হবে 2 তে চলে যাবে এবং কেবল 2 এর পরে এটি 0 এবং তারপরে চলে যাবে 3 এর জন্য সর্বোচ্চ সংখ্যার মান tabindexহয় 32767। যদি উপাদানগুলির একই থাকে tabindexতবে ট্যাবইন্ডেক্সটি মার্কআপে উত্স ক্রমের সাথে মিলবে। একটি নেতিবাচক মান ট্যাব সূচক থেকে উপাদানটি সরিয়ে ফেলবে তাই এটি কখনই দৃষ্টি নিবদ্ধ করা হবে না।

একটি উপাদান নির্ধারিত হয় যদি একটি tabindexএর -1এটা উপাদান মুছে ফেলা হবে এবং এটি focusable হবে না কিন্তু ফোকাস প্রোগ্রামের ব্যবহার উপাদানে দেওয়া যায় element.focus()

যদি আপনি tabindexকোনও মান বা একটি খালি মান না দিয়ে বিশিষ্টটি নির্দিষ্ট করে থাকেন তবে তা উপেক্ষা করা হবে।

disabledবৈশিষ্ট্যটি যদি এমন কোনও উপাদানের উপর সেট করা থাকে যা একটি থাকে tabindexতবে উপাদানটিকে উপেক্ষা করা হবে।


যদি tabindexবাকী কোডের সাথে সম্পর্কিত হয় তা নির্বিশেষে কোনও পৃষ্ঠার ভিতরে যদি সেট করা থাকে (এটি পাদলেখ, সামগ্রী ক্ষেত্রের মধ্যে থাকতে পারে) যেখানে কোনও সংজ্ঞায়িত থাকে tabindexতবে ট্যাব ক্রমটি উপাদানটিতে শুরু হবে যা স্পষ্টভাবে সর্বনিম্ন tabindexমানকে 0 এর উপরে নির্ধারিত tabindexকরা হয়েছে এটি পরে সংজ্ঞায়িত উপাদানগুলির মধ্য দিয়ে চক্র তৈরি করবে এবং স্পষ্ট উপাদানগুলি ট্যাবড করার পরে কেবল এটি নথির শুরুতে ফিরে আসবে এবং প্রাকৃতিক ট্যাব ক্রম অনুসরণ করবে।


এইচটিএমএল 4 স্পেসে কেবল নিম্নলিখিত উপাদানগুলি ট্যাবিনডেক্স বৈশিষ্ট্যটিকে সমর্থন করে: , , , , , , এবং । তবে অ্যাক্সেসযোগ্যতার কথা মাথায় রেখে এইচটিএমএল 5 স্পেস সমস্ত উপাদানকে নির্ধারিত করতে দেয় 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ট্যাগগুলি হবে।


আই ও মোজিলার কোন সংস্করণ 0 এর পরিবর্তে 1tabindex এ শুরু করে ?
আরমিনরোসু

-1; এই উত্তরটি কিছুটা বিভ্রান্ত। আপনি উল্লেখ করেছেন যে আইই এবং ফায়ারফক্সের "পুরাতন সংস্করণগুলি" ট্যাবিনডেক্স 0 এর পরিবর্তে ট্যাবিনডেক্স 1 এ ট্যাবিং শুরু করেছে ... তবে সমস্ত ব্রাউজারই তাই করেন, যা নির্দিষ্ট হিসাবে প্রয়োজন! এছাড়াও আপনি নিজেকে বিপরীত, প্রথম বলার অপেক্ষা রাখে না " tabindex0 এ শুরু" কিন্তু তারপর পরে বলার অপেক্ষা রাখে না "ট্যাবে অর্ডার উপাদান যা স্পষ্টভাবে সর্বনিম্ন নির্ধারিত হয় এ শুরু হবে tabindex0 উপরে মান"
মার্ক অ্যামেরি

18

পৃষ্ঠার মধ্যে ট্যাবিংয়ের ক্রম ( tabফোকাস সরানোর কী টিপুন) নিয়ন্ত্রণ করছেন।

তথ্যসূত্র: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1


6
এছাড়াও, ট্যাবিনডেক্স থাকা কোনও উপাদানকে মাউস ক্লিকের মাধ্যমে নির্বাচনযোগ্য করে তোলে। (বিন্দুযুক্ত রূপরেখাগুলি যুক্ত করুন, ব্যবহার করে স্টাইল করা যেতে পারে :focus)
ব্যবহারকারী 123444555621

@ Pumbaa80 আপনি যে কোনও উপায়ে মাউস ক্লিক করে যে কোনও ইনপুট উপাদান নির্বাচন করতে পারেন এবং ": ফোকাস" সিএসএস ব্যবহারের ক্ষেত্রে এটি একই রকম। ট্যাবিনডেক্স বৈশিষ্ট্যটি alচ্ছিক।
ড্রু

6
এটি কেবল ইনপুট উপাদানগুলির জন্য যায়। আমার মন্তব্য যে কোনও ধরণের উপাদানকে প্রযোজ্য। উদাহরণস্বরূপ jsfiddle.net/XsYCj দেখুন ।
ব্যবহারকারী 123444555621

8

আপনার নির্ধারিত মানগুলি আপনার কীবোর্ড ফোকাস ওয়েবসাইটে থাকা উপাদানগুলির মধ্যে সরে যাওয়ার আদেশ নির্ধারণ করে।

নিম্নলিখিত উদাহরণে, আপনি প্রথমবার যখন ট্যাব টিপবেন তখন আপনার কার্সারটি #foo এ চলে যাবে, তারপরে # অসাধারণ, তারপরে # বার

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

আপনি যদি কোথাও ট্যাব সূচী সংজ্ঞায়িত না করে থাকেন, কীবোর্ড ফোকাসটি আপনার পৃষ্ঠার এইচটিএমএল ট্যাগগুলি ক্রম অনুযায়ী HTML ডকুমেন্টে সংজ্ঞায়িত করবে।

আপনি যদি ট্যাবিনডেক্সগুলি নির্দিষ্ট করার চেয়ে বেশি বার ট্যাব করেন তবে ফোকাসটি এমনভাবে সরে যাবে যে কোনও ট্যাবইন্ডেক্স নেই, যেমন এইচটিএমএল ট্যাগগুলির উপস্থিতির ক্রম হিসাবে


3

এটি ডিফল্ট ফর্ম উপাদান ফোকাস নেভিগেশন ক্রম পরিবর্তন করতে ব্যবহার করা যেতে পারে।

সুতরাং যদি আপনি পেয়েছেন:

text input A

text input B

submit button C

ট্যাব কী ব্যবহার করে আপনি এ-> বি-> সি এর মাধ্যমে নেভিগেট করেন। Tabindex আপনাকে সেই প্রবাহটি পরিবর্তন করতে দেয়।


3

সাধারণত, যখন ব্যবহারকারী কোনও ক্ষেত্র থেকে কোনও ফর্মের ক্ষেত্রগুলিতে ট্যাব করে (কোনও ব্রাউজারে যা ট্যাবিংয়ের অনুমতি দেয়, সমস্ত ব্রাউজার তা করে না) ক্রমটি হ'ল এইচটিএমএল কোডে ক্ষেত্রগুলি প্রদর্শিত হয়।

যাইহোক, কখনও কখনও আপনি ট্যাব ক্রমটি কিছুটা ভিন্নভাবে প্রবাহিত করতে চান। সেক্ষেত্রে আপনি ট্যাবআইএনডিএক্স ব্যবহার করে ক্ষেত্রগুলি নম্বর করতে পারেন। ট্যাবগুলি তারপরে সর্বনিম্ন TABINDEX থেকে সর্বোচ্চে প্রবাহিত হবে।

এখানে আরও তথ্য পাওয়া যাবে w3

অন্য একটি ভাল চিত্র পাওয়া যাবে এখানে


2

সরল কথায়, tabindexউপাদানগুলিতে ফোকাস করার জন্য ব্যবহৃত হয়। সিনট্যাক্স: tabindex="numeric_value" এটি numeric_valueউপাদানটির ওজন। নিম্ন মানটি প্রথমে অ্যাক্সেস করা হবে।


"নিম্ন মানেরটি প্রথমে অ্যাক্সেস করা হবে।" - বেশ সত্য নয়; 0 এবং নেতিবাচক মানগুলির বিশেষ অর্থ রয়েছে।
মার্ক অ্যামেরি

1

এইচটিএমএল ট্যাবিনডেক্স অ্যাট্রিবিউট কীবোর্ড নেভিগেশন দ্বারা কোনও উপাদান পৌঁছনীয় কিনা তা নির্দেশ করার জন্য দায়বদ্ধ । ব্যবহারকারী presses যখন ট্যাব কী ফোকাস স্থানান্তরিত হয় এক উপাদান থেকে অন্য। ট্যাবিনডেক্স অ্যাট্রিবিউট ব্যবহার করে ট্যাব অর্ডার প্রবাহ স্থানান্তরিত হয়।


0

নিয়ন্ত্রণগুলির মাধ্যমে ট্যাবিংগুলি সাধারণত HTML কোডে উপস্থিত হওয়ার সাথে সাথে ক্রমান্বয়ে ঘটে।

ট্যাবিনডেক্স ব্যবহার করে, ট্যাবিনডেক্স ক্রমান্বয়ে ক্রমে সর্বোচ্চ ট্যাবিনডেক্সের সাথে নিম্নতম ট্যাবিনডেক্সের সাথে নিয়ন্ত্রণে প্রবাহিত হবে from

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.