Tab to overlayed div

Question

我有自動完成的代碼，它顯示了一個彈出窗口，其中包含用戶在文本字段中輸入3個或更多字符後的匹配項。標準的東西。

彈出窗口只是一個div，其中有一個包含匹配的列表，例如，

<div id="popup"> 
    <ul> 
    <li><a href="/link1">Link 1</a></li> 
    <li><a href="/link2">Link 2</a></li> 
    </ul> 
</div> 

的問題是，我怎樣才能讓這個當用戶從文本輸入字段內按下tab鍵，跳轉到第一個在<li>元素的列表？

這可能嗎？

我試着在<li>元素上設置tabindex，但是這沒有效果。

我使用的是JavaScript的香草，而不是JQuery的

Answer 1

你可以用程式化的表單元素來實現這一目標而無需腳本。

Answer 2

我認爲你可以在輸入表單中查找按鍵事件，如果用戶按Tab鍵，然後將焦點設置爲第一個結果並防止默認行爲。進一步的掛鉤將正常工作。

事情是這樣的：

function maybeTab(e) { 
 
    if (e.keyCode == 9) { 
 
    // it was tab 
 
    document.querySelector("#popup ul li:first-child a").focus(); 
 
    return false; 
 
    } else { 
 
    // it wasnt tab 
 
    return true; 
 
    } 
 
}

#popup { 
 
    border: 1px solid #00a; 
 
} 
 
a:active, a:focus { 
 
    background-color: #ff0; 
 
}

<input type="text" name="search" id="search" onkeypress="return maybeTab(event);"> 
 
<a href="/linkB">Link InBetween</a> 
 
<div id="popup"> 
 
    <ul> 
 
    <li><a href="/link1">Link 1</a></li> 
 
    <li><a href="/link2">Link 2</a></li> 
 
    </ul> 
 
</div>