Internet Explorer上的“输入”事件，数据列表选项选择未触发

Question

在下面的示例中，我有一个输入字段和附带的datalist元素。我正在尝试编写用户从列表中选择项目时监听的javascript。我已经看到它建议使用“输入”事件，在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)); //https://stackoverflow.com/questions/22004381/ie-input-event-for-contenteditable
};

在IE中，还有文本输入字段上的'x'清除按钮的问题，在使用上述代码时不会触发输入事件。为此，你可以a）简单地用CSS隐藏那个清除按钮，如下所示：

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

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

希望有所帮助！