Javascript Internet explorer 10“；输入“；数据列表选项选择上的事件未触发

在下面的示例中，我有一个输入字段和附带的datalist元素。我正在尝试编写javascript，当用户从列表中选择一个项目时，它会侦听。我已经看到有人建议使用“输入”事件来实现这一点，而在Chrome、Firefox等浏览器中，这一切都是可行的。问题是internet explorer

在IE10中，我得到以下行为：

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

参见测试：

$（'input'）。在（'input'，function（）上{
log（$（'input'）.val（））；
});
我在IE11上遇到了同样的问题，并基于此创建了一个自定义的自动完成列表：

一些测试表明，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中，文本输入字段上的“清除”按钮也存在问题，使用上述代码时不会触发输入事件。为此，您可以a）简单地用CSS隐藏清除按钮，如下所示：

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

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

希望有帮助
 我没有访问IE10的权限来验证这一点，但请尝试侦听
change
事件，或同时侦听这两个事件，如
$（'input'）。on（'input change'，function（））{
所以我添加了“更改”。它仍然不会立即启动，但是如果我单击页面上的其他位置，它会执行我的功能…可能是在输入元素失去焦点时。它以前没有这样做…所以我猜这是一个进步。似乎IE10无法解决这个问题，因为它已向microsoft报告，并在e下一个版本。由于微软不再支持IE10，它可能也不会被修复。而且由于它不是一个常青的浏览器，我不会做太多的事情来支持仍在使用它的人。给他们一个“太好”的印象在网站上的体验只会让他们与他们习惯的东西产生混淆。请参阅此处了解更多信息：唉，在这个项目上，我没有权力单方面取消对IE10用户的支持。如果我这样做了，我会抛出一句“使用现代浏览器，该死的”我想我将使用JS库来实现autosuggest，而不是原生HTML数据列表。