কীভাবে আপনি একটি দ্বি "ট্যাব্বেবল" বানাবেন?

Question 1

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

কারো কাছে কি কোন সমাধান আছে?

Question 2

tabindexআপনার divউপাদানগুলিতে বৈশিষ্ট্য যুক্ত করুন ।

উদাহরণ:

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

প্রতি steveax এর মন্তব্য, যদি আপনি ট্যাব অর্ডার যেখানে উপাদান পৃষ্ঠা থেকে থেকে পথভ্রষ্ট করতে না চান, সেট tabindexকরতে 0:

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

Question 3

আগ্রহীদের জন্য, স্বীকৃত উত্তর ছাড়াও, আপনি যখন এটি ট্যাব করবেন তখন দ্বি শৈলীর পরিবর্তন করতে আপনি নীচের jquery যুক্ত করতে পারেন এবং একটি ক্লিক ট্রিগার করতে এন্টার এবং স্পেসও পরিচালনা করতে পারেন (তারপরে আপনার ক্লিকের হ্যান্ডলার বাকিটি করবে)

$(document).on('focus', '.button',function(){
    $(this).css('border','1px dotted black')
});
$(document).on('keyup', '.button',function(e){
    if(e.which==13 || e.which==32)
        $(this).click()
});

আমি নিশ্চিত যে কেউ এটিকে একটি জকিউ প্লাগইন $ ()। MakeTabStop এ তৈরি করেছেন

Question 4

tabindex="0"আপনি ট্যাববল করতে চান এমন প্রতিটি ডিভিটিতে অ্যাট্রিবিউট যুক্ত করুন । তারপরে সিএসএস সিউডো ক্লাসগুলি ব্যবহার করুন: হোভার এবং: ফোকাস, উদাহরণস্বরূপ অ্যাপটি ব্যবহারকারীকে বোঝাতে যে ডিভিউ ফোকাসে এবং ক্লিকযোগ্য, উদাহরণস্বরূপ। ক্লিকটি পরিচালনা করতে জাভাস্ক্রিপ্ট ব্যবহার করুন।

var doc = document;
var providers = doc.getElementsByClassName("provider");

for (var i = 0; i < providers.length; i++) {
    providers[i].onclick = function() {
      console.log(this.innerHTML);
    };
}

.provider {
    flex: 0 1 auto;
    align-self: auto;
    width: 256px;
    height: 48px;
    margin-top: 12px;
    margin-right: 12px;
    text-align: center;
    line-height: 48px;
    
    text-transform: uppercase;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10%;
    background-color: gray;
}

.provider:hover{
  cursor: pointer;
}

.provider:focus{
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}

<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="twitter" class="provider" tabindex="0">twitter</div>

স্নিপেট প্রসারিত করুন

Question 5

Jquery ব্যবহার করে কী প্রেসগুলি দিয়ে উপাদানগুলি ট্যাবলেবল এবং ক্লিকযোগ্যযোগ্য করুন

অনুমান

যে সমস্ত উপাদান একটি অ-ট্যাবলেবল, অ-ক্লিকযোগ্যযোগ্য ধরণের এবং ক্লিকযোগ্যযোগ্য হওয়া উচিত তাদের একটি অনক্লিক বৈশিষ্ট্য থাকতে পারে (এটি কোনও শ্রেণি বা অন্যান্য বৈশিষ্ট্যে পরিবর্তিত হতে পারে)
সমস্ত উপাদান একই ধরণের হয়; আমি ডিভ ব্যবহার করব।
আপনি jquery ব্যবহার করছেন

নমুনা এইচটিএমএল:

...

<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>

...

জিকিউরি কোড: পৃষ্ঠাটি লোড হয়ে যাওয়ার পরে এটি কোডটি চলবে। এটি আপনার HTML পৃষ্ঠায় চালানো দরকার।

$(()=>{
    // make divs with an onclick attribute tabbable/clickable
    $('div[onclick]')
        .attr('tabindex', '0')                     // Add tab indexes
        .keypress((evt)=>{
            var key = evt.key;
            evt.preventDefault();                  // Ensure all default keypress
                                                   // actions are not used
            if (key === ' ' || key === 'Enter') {  // Only send click events for Space
                                                   // or Enter keys
                evt.currentTarget.click();         // Run the click event for element
            }
        });
});

আপনি এখানে একটি কাজের উদাহরণ খুঁজে পেতে পারেন ।