HTML選擇：消除瀏覽器按鍵更改的延遲？

考慮下面的HTML：HTML選擇：消除瀏覽器按鍵更改的延遲？

<select> 
    <option>Aardvark</option> 
    <option>Buffalo</option> 
    <option>Camel</option> 
    <option>X-ray Fish</option> 
    <option>Yak</option> 
    <option>Zebra</option> 
</select>

在大多數瀏覽器中，當選擇元素具有焦點時，按下按鍵選擇的值更改爲與輸入的字符開頭的下一個選項。例如，在鍵盤上按下'B'，而上面的<select>元素具有焦點時，將所選值更改爲「Buffalo」。之後按'Z'將會將值更改爲「Zebra」。

但是我剛剛發現，至少在我的電腦上的Firefox 6和Safari 5中，有一段時間才能按下選擇下一個值。在上面的具體示例中，如果按「B」，然後在不到一秒鐘後按「Z」，則看起來沒有任何事情發生。但是，在進一步的測試中（使用jQuery），我發現無論您按多快鍵，JavaScript事件'keydown'，'keyup'和'keypress'都會像您所期望的那樣被解僱。瀏覽器本身不會切換選定的選項，直到經過一段時間。

有什麼辦法可以解決這個問題嗎？

來源

2011-09-15 Brian Lacy

瀏覽器可能會搜索一個以「BZ」開頭（並失敗）的值，而不是跳轉到以「Z」開頭的值。我想你可以重寫關鍵事件並自己找到價值，但這不是一個很好的解決方案。 –

它在瀏覽器中的工作方式是它搜索你輸入的內容。如果你輸入bz，它會搜索從bz開始的東西。這對於例如在那些三重詛咒的下拉框中輸入你的出生年，所以你可以輸入1984年或其他任何東西。如果您暫停一會兒，瀏覽器會「忘記」您鍵入的內容，然後再次輸入時會開始一個新的「搜索」。 – Asmor

我通過中斷該KeyEvent和放置preventDefault()在功能上做到了。我使用輸入鍵來打破延遲並提交我已經輸入的內容。

if (eventinfo.keyCode == 13) { 
    eventinfo.preventDefault(); 
    var search = document.getElementById("searchtag"); 
    var value = search.value; 
    mainPage.searchAdd(value).done(
     function() { 
      search.value = ""; 
      search.focus(); 
     } 
    ); 
}

來源

2017-09-02 14:02:51 BrianDwayne

恭喜，你現在得到了最佳答案。而且晚了5年。 :) –

這似乎有可能與克隆。這是一個非常骯髒的黑客，但在Chrome中運行得很好：http://jsfiddle.net/pimvdb/v6qy8/2/。

$('select').keyup(function() { 
    var newSelect = $(this).clone(true).val($(this).val()); 
    $(this).replaceWith(newSelect); 
    newSelect.focus(); 
});

來源

2011-09-15 17:22:18 pimvdb

最接近實際解決方案。 –

HTML選擇：消除瀏覽器按鍵更改的延遲？

回答

相關問題