नीचे तीर पर सूची आइटम पर फ़ोकस करें

Question

मैं कस्टम ऑटो सुझाव-बॉक्स बना रहा हूं, मुझे तीर डाउन प्रेस पर li आइटमों पर स्थानांतरित करने की आवश्यकता है।

इसलिए मैंने टैबिंडेक्स विशेषता को ली में जोड़ा है, यह ध्यान केंद्रित कर रहा है। लेकिन समस्या यह है कि यह कुछ यादृच्छिक ऊंचाई के साथ div को स्क्रॉल कर रहा है कि यह div से चयनित ली बाहर है।

तीर नीचे कुंजी के बाद:

और कुछ तीर नीचे कुंजी दबाने के बाद:

और उसके बाद यह स्क्रीन से बाहर चला जाता है जबकि माउस नीचे पूरी तरह व्यवहार करता है।

यहां मैंने Demo JSFiddle पहले item1 पर क्लिक किया और फिर तीर को उसी तरह से दबाएं।

Answer 1

मेरी टिप्पणी

सेट कंटेनर की scrollTop करने के लिए index of focused li * li height पर विस्तार से चर्चा करते कर सकते हैं।

return false ओवरडाउन माता-पिता के सामान्य ब्राउज़र स्क्रॉलिंग को रोकने के लिए कीडाउन पर।

$('div.container').on('focus', 'li', function() { 
    var $this = $(this); 
    $this.addClass('active').siblings().removeClass(); 
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight()); 
}).on('keydown', 'li', function(e) { 
    var $this = $(this); 
    if (e.keyCode === 40) {   
     $this.next().focus(); 
     return false; 
    } else if (e.keyCode === 38) {   
     $this.prev().focus(); 
     return false; 
    } 
}).find('li').first().focus(); 

jsfiddle http://jsfiddle.net/38zR3/42/

Answer 2

यह सुनिश्चित करने के लिए कि यह या तो केंद्रित है या आप इसे कैसे चाहते हैं, .scrollTop() जोड़ें।

Answer 3

मुझे उस बार एक समस्या थी और इसमें आपकी पसंद के आधार पर युक्त div के none या hidden की सीएसएस शैली overflow सेट करके इसे हल किया गया था।

Answer 4

क्या आपने टैबिंडेक्स के बजाय एंकर का उपयोग करने का प्रयास किया है? उदाहरण के लिए:

<li><a href="#"></li> 

मेरे अनुभव में कुछ ब्राउज़रों tabindex पर ध्यान केंद्रित करने को संभाल नहीं सही ढंग से