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

Question

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

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

这是一个说明我的问题的 jsFiddle：

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

It may not seem like an optimal solution, but you could try to implement what this answer states regarding cloning and replacing the original object:

$('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();
    }
});

At least it works for me on Chrome 26...

JSFiddle Demo

Answer 2

如果您添加似乎可以修复它

$('select').blur().focus(); 

处理完每个回车键按下。