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

【问题标题】：Internet explorer 10 "input" event on datalist option selection not firing数据列表选项选择上的 Internet Explorer 10“输入”事件未触发
【发布时间】：2023-03-20 07:22:01
【问题描述】：

在以下示例中，我有一个输入字段和随附的 datalist 元素。我正在尝试编写 javascript 来监听用户何时从列表中选择一个项目。我已经看到它建议为此使用“输入”事件，并且在 Chrome、Firefox 等中一切正常。问题是互联网浏览器。

在 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 触发该（或任何）事件有任何建议，以便在用户进行选择时运行函数？

【问题讨论】：

我无法访问 IE10 来验证这一点，但请尝试收听 change 事件或像 $('input').on('input change', function(){ 一样收听两者
所以我添加了“更改”。它仍然不会立即触发，但是如果我单击页面上的其他位置，它会执行我的功能......大概是当输入元素失去焦点时。它以前没有那样做……所以我猜这就是进步。
似乎这个问题对于 IE10 是不可修复的，因为它被报告给了微软，并且在下一个版本中首先得到了纠正。由于微软不再支持IE10，它可能也不会修复。而且由于它不是一个常青的浏览器，我不会做太多来支持仍在使用它的人。在网站上给他们“太好”的体验只会让他们混淆他们的习惯。请参阅此处了解更多信息：github.com/jquery/jquery/issues/1698
唉，这个项目我没有权力单方面不支持 IE10 用户。如果我这样做了，我会抛出一个“使用现代浏览器，该死的”消息并收工。我想我将使用 JS 库来进行自动提示，而不是使用原生 HTML 数据列表。

标签： javascript internet-explorer-10 dom-events html-datalist

【解决方案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 值 ('') 不同。

希望有帮助！

【讨论】：