ট্যাবইন্ডেক্স থেকে এইচটিএমএল উপাদানকে কীভাবে উপেক্ষা করবেন?


361

এইচটিএমএল-এ কোনও উপায় আছে কি ব্রাউজারকে নির্দিষ্ট উপাদানগুলিতে ট্যাব সূচকের অনুমতি না দেয়?

আমার পৃষ্ঠায় যদিও একটি সিডো শো রয়েছে যা jQuery এর সাথে রেন্ডার করা হয়েছে, যখন আপনি এটির মাধ্যমে ট্যাব করেন, আপনি ট্যাব কন্ট্রোলটি পৃষ্ঠার পরবর্তী দৃশ্যমান লিঙ্কে চলে যাওয়ার আগে অনেকগুলি ট্যাব প্রেসগুলি পান কারণ যে সমস্ত জিনিস যার মাধ্যমে ট্যাব করা হচ্ছে তা লুকানো থাকে you ব্যবহারকারী দৃশ্যত।

উত্তর:


591

আপনি ব্যবহার করতে পারেন tabindex="-1"

W3C এর HTML5 এর স্পেসিফিকেশন নেতিবাচক সমর্থন tabindexমান:

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


এটি একটি এইচটিএমএল 5 বৈশিষ্ট্য এবং পুরানো ব্রাউজারগুলির সাথে কাজ নাও করতে পারে তা দেখুন।
হতে (1999 থেকে) W3C এর এইচটিএমএল 4.01 মান অনুবর্তী, tabindex ইতিবাচক হতে করার প্রয়োজন হবে।


খাঁটি এইচটিএমএলে নীচে ব্যবহারের নমুনা।

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />


12
মনে হচ্ছে গুগল ক্রোম -1, যা ইন্দ্রিয় তোলে যেহেতু টেকনিক্যালি tabIndex শুধুমাত্র অনুযায়ী 0 -32767 সমর্থন সমর্থন করে না লিঙ্কেW3 । সুতরাং আমি যখন এটি করেছি; আমি 500 ব্যবহার করেছি। হ্যাকিশ; কিন্তু কাজ।
ফ্লাই

38
@ ফ্লাইয়া 23 সংস্করণ অনুসারে, গুগল ক্রোম ট্যাবিনডেক্সে -1 সমর্থন করে। এটি ঠিক কত বছর আগে ঘটেছিল তা নিশ্চিত নয়, সম্ভবত 23 এর আগে।
jkupczak

5
আমি উত্তরটি আপডেট করা এইচটিএমএল 5 স্পেসিফিকেশনের লিঙ্কটিতে সম্পাদনা করেছি। tabindexএখন নেতিবাচক মান থাকতে দেয়।
জেমস ডোনেলি

1
@ জেমসডোনেলি আপনার সম্পাদনার জন্য ধন্যবাদ ব্রাউজারের সামর্থ্যের জন্য আমি ডাব্লু 3 সি এইচটিএমএল 4 স্পেসে পুনরায় যুক্ত করেছি।
মার্টিন হেনিংস

2
সমর্থিত ইন্টারনেট 5,01 থেকে msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx
Skurpi

121

tabindexএটিকে ভুলে যাবেন না, যদিও সমস্ত চশমা এবং এইচটিএমএল, জাভাস্ক্রিপ্ট / ডিওএম-তে যে সম্পত্তিটিকে বলা হয় তার সমস্ত ছোট হাতের অক্ষর রয়েছে tabIndex

আপনার প্রোগ্রামগতভাবে পরিবর্তিত ট্যাব সূচকগুলির কলিং কেন element.tabindex = -1কাজ করছে না তা জানার চেষ্টা করে আপনার মন হারাবেন না। ব্যবহার element.tabIndex = -1


34
দেখে মনে হচ্ছে এটি কোনও মন্তব্য নয় উত্তর।
ড্রকর্ড

47
এহ, আমি এটি পড়ে খুশি হয়েছিলাম, এবং এটি সম্ভবত কোনও মন্তব্য হিসাবে দাফন করা হলে আমি এটিকে মিস করতাম।
ম্যালকোমওসন

10

যদি এগুলি প্রাকৃতিকভাবে ট্যাব ক্রমের মতো বোতাম এবং অ্যাঙ্কারগুলির উপাদান হয় তবে এগুলি ট্যাব অর্ডার থেকে ট্যাবিনডেক্স = -1 দিয়ে সরিয়ে ফেলা এক প্রকারের অ্যাক্সেসযোগ্যতার গন্ধ। যদি তারা ডুপ্লিকেট কার্যকারিতা সরবরাহ করে থাকে তবে এগুলি ট্যাব ক্রম থেকে সরানো ঠিক আছে এবং এই উপাদানগুলির সাথে আরিয়া-লুকানো = যুক্ত করা বিবেচনা করুন যাতে সহায়ক প্রযুক্তিগুলি তাদের এড়িয়ে চলে।


8

আপনি যদি এমন কোনও ব্রাউজারে কাজ করছেন যা সমর্থন করে না tabindex="-1", আপনি সত্যিই উচ্চমাত্রার ট্যাব সূচককে এড়িয়ে যেতে হবে এমন জিনিসগুলি দিয়ে আপনি পালাতে সক্ষম হতে পারেন । উদাহরণস্বরূপ tabindex="500"পৃষ্ঠাটির শেষের দিকে অবজেক্টের ট্যাব ক্রমটি সরানো হয়।

আমি এটির মাঝখানে একটি বোতাম নিক্ষেপ করে একটি দীর্ঘ তথ্য এন্ট্রি ফর্মের জন্য এটি করেছি। এটি লোকেদের প্রায়শই ক্লিক করে এমন কোনও বোতাম নয় তাই আমি চাইনি যে তারা এটিকে ঘটনাক্রমে এটিতে ট্যাগ করে এবং এন্টার টিপবে। disabledকাজ করবে না কারণ এটি একটি বোতাম।


5

"ট্যাবআইন্ডেক্স = -1" এর মতো হ্যাক আমার জন্য ক্রোম ভি 53 দিয়ে কাজ করে না।

এটি যা ক্রোম এবং বেশিরভাগ ব্রাউজারের জন্য কাজ করে:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>


এটি কেবল ট্যাবটি অক্ষম করার পরিবর্তে কোনও ডিফল্ট ট্যাব সূচককে বরাদ্দ করবে না?
আইনজীবী

@ লায়েয়ারসন না, এটি 'ট্যাবঅ্যাট্রিবিউট' এর স্বতঃ ব্যাখ্যা করার সাথে সাথে এটি ট্যাবিংটি অক্ষম করে। আপনি এটি চেষ্টা করেছেন কিন্তু বিভিন্ন ফলাফল সঙ্গে?
Val,

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

স্নিপেট চালাচ্ছি আমি notabindexবাক্সে ট্যাব করতে পারি tabIndex=5যেন বোতামটি টিপানোর পরে এটি রয়েছে । কোনও মেয়র ইস্যু নয় তবে এখনও এটি পুরোপুরি "আন-ট্যাবটেবল" তৈরি করছে না।
মিকেল দেই বলিদার

এটি সম্ভবত কাজ করছে না কারণ আপনি উটের ক্ষেত্রে ব্যবহার করছেন। এটি সমস্ত ছোট হাতের মধ্যে থাকা উচিতtabindex
dman

3

এটি করার উপায় যুক্ত করে tabindex="-1"। এটি একটি নির্দিষ্ট উপাদানের সাথে যুক্ত করে কীবোর্ড নেভিগেশন দ্বারা এটি অ্যাক্সেসযোগ্য হয়। এখানে একটি দুর্দান্ত নিবন্ধ রয়েছে যা আপনাকে ট্যাবিনডেক্স আরও বুঝতে সহায়তা করবে ।


2

কেবলমাত্র disabledউপাদানটিতে অ্যাট্রিবিউট যুক্ত করুন (বা এটি আপনার জন্য jQuery ব্যবহার করুন)। অক্ষম করা ইনপুটটিকে মোটেও কেন্দ্রীভূত বা নির্বাচিত হতে বাধা দেয়।


ক্রোমের কোন সংস্করণ?
ইয়াকভ আইনস্পান

ক্রোম 49.0.2623.75 (bit৪ বিট)।
ফেলিক্স ইভ

আমার সংস্করণটি 51.0.2704.103। এই কোলাহলটি পরীক্ষা করে দেখুন । আপনার ভুল কোড থাকতে পারে, আপনি কখনই জানেন না।
ইয়াকভ আইনস্পান

@ অতুলচৌধুরী, এটি কীভাবে কাজ করে না? আপনি এখনও এটি ফোকাস করতে পারেন?
ইয়াকভ আইনস্পান

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