HTML Select 报告 IE 11 中更改事件的有效性错误

Question

我正在尝试将更改事件处理程序添加到 select 标记，但出于某种原因，IE 报告了错误的有效性 - 无论如何它始终有效。 see plunk

奇怪的是，如果我随后在控制台中手动检查 select 标签并键入 [=13=].validity.valid，它会报告正确的值。

代码如下：

    <select name="choices" id="sel" required>
        <option value="">Nothing</option>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
    </select>
    <span id="output"></span>
    <script>
        document.addEventListener('DOMContentLoaded', function() { 
            document.getElementById('sel').addEventListener('change', function(event) {
                document.getElementById('output').innerHTML = 'Field value: ' + event.target.value + '; Valid: ' + event.target.validity.valid; 
            });
        });
    </script>

这是 IE 中的错误还是我的代码？

Chrome 顺便说一句，一切正常。

Answer 1

这是一个浏览器怪癖，因此您需要检查实际的字符串。提示是始终这样做，不要依赖浏览器将 "empty" 字符串设置为 false/true，因为如果这样做，您将运行陷入这些小怪癖。

这是一个如何做到这一点的例子：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('sel').addEventListener('change', function(event) {
    var current = event.target.value;
    if( current == ''){ event.target.value = false; }
    document.getElementById('output').innerHTML = 'Field value: ' + current + '; Valid: ' + event.target.validity.valid; 
  });
});

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <select name="choices" id="sel" required>
        <option value="">Nothing</option>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
    </select>
    <span id="output"></span>
  </body>

</html>

HTML Select 报告 IE 11 中更改事件的有效性错误

HTML Select reports wrong validity on change event in IE 11

html

javascript

internet-explorer-11