我有一个固定高度的小面板,其中包含搜索结果的锚点列表。我想超越tab键,因此它只会转到页面上作为这些结果一部分的锚点。
当按Tab键时,我将焦点设置为下一个符合条件的锚点。在Safari,FF,Chrome中,这也会使新聚焦的项目滚动到视图中(就像自然的Tab事件一样),但不是IE。
相关代码如下。
CSS
#search-results { height: 200px; overflow: auto; }
HTML
<div id="search-results-panel">
<h2 id="StrSearchResults">Search Results:</h2>
<ul id="search-results">
<li><a class="item">Item One</a></li>
<li><a class="item">Item Two</a></li>
<li class="focus"><a class="item">Item Three</a></li>
<li><a class="item">Item Four</a></li>
<li><a class="item">Item Five</a></li>
</ul>
</div>
jquery的
$('body').on('keydown', 'input, a', function(e) {
var focusable, next, prev;
if ( e.keyCode === 9 ) { // tab
var selected = $('li.focus a.item')[0];
e.preventDefault();
focusable = $(document).find('li a.item').filter(':visible');
if ( e.shiftKey ) {
prev = focusable.eq(focusable.index(selected)-1);
if (prev.length) {
prev.focus();
}
}
else {
next = focusable.eq(focusable.index(selected)+1);
if (next.length) {
next.focus();
}
}
}
});
fwiw,这是应用程序的一部分,因此正常的浏览器行为不适用于此处。
非常感谢您一起来看看!