使用jquery将焦点设置为锚点不会将其滚动到IE中的视图中

时间:2014-01-09 20:42:07

标签: jquery html css

我有一个固定高度的小面板,其中包含搜索结果的锚点列表。我想超越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,这是应用程序的一部分,因此正常的浏览器行为不适用于此处。

非常感谢您一起来看看!

0 个答案:

没有答案