आप एक div "tabbable" कैसे बनाते हैं?

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

उन लोगों के लिए, जो स्वीकृत उत्तर के अलावा, आप निम्न टैब जोड़ सकते हैं, जब आप इसे टैब करते हैं, तो div शैली में परिवर्तन करने के लिए जोड़ सकते हैं, और एक क्लिक को ट्रिगर करने के लिए Enter और Space को भी संभाल सकते हैं (फिर आपका क्लिक हैंडलर बाकी काम करेगा)

$(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()
});

मुझे यकीन है कि किसी ने इसे jq plugin $ () में बनाया है

Question 4

tabindex="0"प्रत्येक div के लिए विशेषता जोड़ें जो आप सारणीबद्ध करना चाहते हैं। फिर सीएसएस छद्म वर्गों का उपयोग करें: हॉवर और: फ़ोकस, उदाहरण के लिए ऐप उपयोगकर्ता को सूचित करने के लिए कि डिव फोकस और क्लिक करने योग्य है, उदाहरण के लिए। क्लिक को संभालने के लिए जावास्क्रिप्ट का उपयोग करें।

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 का उपयोग करके मुख्य प्रेस के साथ तत्वों को सारणीबद्ध और क्लिक करने योग्य बनाएं

मान्यताओं

सभी तत्व जो एक गैर-टैबेबल, गैर-क्लिक करने योग्य प्रकार के होते हैं और क्लिक करने योग्य होना चाहिए उनमें एक ऑनक्लिक विशेषता होती है (इसे कक्षा या अन्य विशेषता में बदला जा सकता है)
सभी तत्व एक ही प्रकार के हैं; मैं divs का उपयोग करेंगे।
आप jquery का उपयोग कर रहे हैं

नमूना html:

...

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

...

Jquery कोड: यह वह कोड होता है जो पेज लोड होने पर चलेगा। इसे आपके 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
            }
        });
});

आप यहां एक काम करने का उदाहरण पा सकते हैं ।