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

Question

मेरे पास ऐसे बटन हैं जो div तत्व हैं और मैं उन्हें बनाना चाहता हूं ताकि उपयोगकर्ता अपने कीबोर्ड पर टैब कुंजी दबा सकें और उनके बीच स्थानांतरित कर सकें। मैंने एंकर टैग में अपना टेक्स्ट लपेटने की कोशिश की है लेकिन यह काम नहीं कर रहा है।

क्या किसी के पास कोई समाधान है?

Answer 1

tabindex आपको तत्वों को विभाजित करते हैं।

उदाहरण:

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

प्रति steveax की टिप्पणी, अगर आप टैब क्रम जहां तत्व पेज में है से विचलित नहीं करना चाहते, tabindex सेट 0 करने के लिए:

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

Answer 2

इच्छुक लोगों के लिए, स्वीकृत उत्तर के अतिरिक्त, आप जब आप टैब पर टैब शैली बदलते हैं, तो आप निम्न 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() 
}); 

मुझे यकीन है कि किसी को एक JQ प्लगइन $ में इस बना दिया है प्रत्येक div करने के लिए आप tabbable चाहते()। MakeTabStop

Answer 3

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>