javascript - 重置 HTML 选择元素中的 Type-A-Value 功能

Question

我们在 HTML 中有很多值 <select>我们希望用户能够快速输入的元素，按 Enter 键接受每个元素。

但是，如果用户键入的速度太快，则所选值不会改变。我不知道为什么，但我怀疑这是因为选择元素要求用户在 Type-a-value 功能重置之前暂停，他们可以开始输入新值，而按 Enter 不会重置它。

Here's a jsFiddle that illustrates my problem:

HTML

<select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
    <option>e</option>
</select>

<ol>
</ol>

Javascript

$('select').on('keydown',function(e) {
    if (e.which === 13) { // Enter
        $('ol').append('<li>' + $('select').val() + '</li>');
    }
});

如果你足够快，你会填满 <ol>无论您键入什么，都具有相同的值。可以更改哪些内容以便快速用户仅获取他们键入的值？

Answer 1

这似乎不是最佳解决方案，但您可以尝试实现 this answer 关于克隆和替换原始对象的声明:

$('select').on('keydown',function(e) {
    if (e.which === 13) { // Enter
        $('ol').append('<li>' + this.value + '</li>');
        var newSelect = $(this).clone(true).val(this.value);
        $(this).replaceWith(newSelect);
        newSelect.focus();
    }
});

至少它在 Chrome 26 上对我有用...

JSFiddle Demo