HTML选择器：如何消除浏览器在按键更改时的延迟？

Question

Consider the following HTML:

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

在大多数浏览器中，当选择元素获得焦点时，按键会将选定值更改为以键入字符开头的下一个选项。例如，在上面的<select>元素上具有焦点时按下键盘上的“B”会将选定值更改为“Buffalo”。在此之后按下“Z”将更改值为“Zebra”。

但是我刚刚发现，在我的PC上至少在Firefox 6和Safari 5中，我需要等待一段时间才能按下选择下一个值。在上述特定示例中，如果我按“B”，然后不到一秒钟就按“Z”，似乎什么也没有发生。

然而，在进一步测试（使用jQuery）中，我发现Javascript事件“keydown”，“keyup”和“keypress”都像预期的那样被触发，无论您如何快速按键。浏览器本身只是在一定时间内不切换所选选项。

有没有办法解决这个问题？

- Brian Lacy

---

浏览器可能会搜索以“BZ”开头的值（并失败），而不是跳转到以“Z”开头的值。我猜你可以覆盖键盘事件并自己找到这个值，但这不算太好的解决方案。 - Digital Plane

在浏览器中的工作方式是搜索您输入的内容。例如，如果您键入“bz”，它会搜索以“bz”开头的内容。这对于在下拉框中输入您的出生年份非常有用，因此您只需键入1984或其他内容。如果您停顿一会儿，浏览器将“忘记”您键入的内容，并在您再次键入时开始新的“搜索”。 - Asmor

Answer 1

通过克隆似乎是可能的。这是一种非常不优雅的方法，但在Chrome浏览器中可以正常工作: http://jsfiddle.net/pimvdb/v6qy8/2/。

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

- pimvdb

---

最接近实际解决方案。 - Brian Lacy

Answer 2

我通过中断 keyevent 并在函数顶部放置 preventDefault() 实现了这一点。我使用 Enter 键来打破延迟并提交我已经输入的内容。

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

- BrianDwayne

---

恭喜，您现在获得了最佳答案。只是晚了5年而已。 :) - Brian Lacy