HTML Select：消除按键更改时的浏览器延迟？答案

【问题标题】：HTML Select: Eliminating browser Delay on keypress-to-change?HTML Select：消除按键更改时的浏览器延迟？
【发布时间】：2017-09-02 22:26:02
【问题描述】：

考虑以下 HTML：

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

In most browsers, when the select element has focus, pressing a key will change the selected value to the next option that begins with the character typed.例如，在上面的<select> 元素具有焦点时按键盘上的“B”会将所选值更改为“Buffalo”。之后按“Z”会将值更改为“Zebra”。

但我刚刚发现，至少在我的 PC 上的 Firefox 6 和 Safari 5 中，在我可以按下选择下一个值之前存在延迟。在上面的具体示例中，如果我按“B”，然后在不到一秒后按“Z”，则似乎什么都没有发生。

然而，在进一步的测试中（使用 jQuery），我发现 Javascript 事件 'keydown'、'keyup' 和 'keypress' 都如你所愿地被触发，无论你以多快的速度按下按键。浏览器本身只是在经过一段时间后才会切换所选选项。

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

【问题讨论】：

浏览器可能会搜索以“BZ”开头的值（并且失败），而不是跳转到以“Z”开头的值。我想您可以覆盖关键事件并自己找到值，但这不是一个解决方案。
它在浏览器中的工作方式是搜索您输入的内容。如果您键入 bz，它会搜索以 bz 开头的内容。这对例如有帮助在那些该死的下拉框中输入您的出生年份，这样您就可以输入 1984 或其他任何内容。如果您暂停片刻，浏览器会“忘记”您输入的内容，并在您再次输入时开始新的“搜索”。

标签： javascript html dom html-select

【解决方案1】：

克隆似乎是可能的。这是一个非常肮脏的 hack，但在 Chrome 中运行良好：http://jsfiddle.net/pimvdb/v6qy8/2/。

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

【讨论】：

最接近实际的解决方案。

【解决方案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();
        }
    );
}

【讨论】：

恭喜，您现在获得了最佳答案。而且只晚了5年。 :)