Question

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

奇怪的是，如果我在控制台中手动检查选择标签后输入$0.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 btw中的一切正常。

Answer 1

这是浏览器怪癖，因此您需要检查实际的字符串。一个提示是始终这样做，而不是依赖浏览器将“空”字符串设置为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中更改事件的错误有效性

1 个答案: