Internet Explorer 10 "input" 数据列表选项选择事件未触发

Question

在下面的示例中，我有一个输入字段和随附的数据列表元素。我正在尝试编写 javascript 来监听用户从列表中选择项目的时间。我已经看到它建议为此使用 "input" 事件，并且在 Chrome、Firefox 等中它都有效。问题是 Internet Explorer。

在 IE10 中我得到以下行为：

在字段中键入会触发事件。
从数据列表中选择一个项目不会触发事件第一次。
重新选择相同的选项会触发该事件。

查看测试：

$('input').on('input', function(){
    console.log($('input').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

有没有人对我如何强制 Internet Explorer 触发该（或任何）事件有任何建议，以便我可以运行用户做出选择时的功能？

Answer 1

我运行在 IE11 上遇到了同样的问题，基于此制作了自定义自动完成列表：https://www.w3schools.com/howto/howto_js_autocomplete.asp

一些测试表明，当点击离开输入框时（即失去焦点时），IE11 会触发 input 事件。与其他浏览器一样，预期的行为是仅在输入字段中输入文本（包括退格键）时触发此事件。

解决办法是在IE中检查输入值是否发生了变化，像这样：

function inputEventGeneral(input, fn) { //input event for any browser
    if (checkBrowserIE()) {
        inputEventIE(input, fn);
    } else {
        input.addEventListener('input', function (e) { //normal input event for Chrome, FF, etc.
            fn(this); //run this function on input
        });
    };
};

function inputEventIE(input, fn) { //input event for IE
    let curr = '';
    let prev = '';

    input.addEventListener('input', function (e) {
        curr = this.value;

        if (prev === curr) { //check if value changed
            return;
        };

        prev = curr; //update value of prev

        fn(this); //run this function only if the value has been changed
    });
};


function checkBrowserIE() {
    return (/Trident/.test(navigator.userAgent)); //
};

在IE中，也存在文本输入框'x'清除按钮的问题，使用上述代码时不会触发输入事件。为此，您可以 a) 简单地使用 CSS 隐藏清除按钮，如下所示：

input[type=text]::-ms-clear { display: none; }

或 b) 您可以修改上面的代码以将 prev 的值存储在 data-prev 属性或全局变量中，然后使用输入表单值的任何更改更新它 (例如，当从自动完成 list/datalist 中选择时）。这将导致事件在单击清除按钮时触发，因为 prev 值 (val) 将不同于 curr 值 ('')清除时。

希望对您有所帮助！

Internet Explorer 10 "input" 数据列表选项选择事件未触发

Internet explorer 10 "input" event on datalist option selection not firing

javascript

internet-explorer-10

dom-events

html-datalist