javascript - 即使输入有效，Internet Explorer 也不会更改跨度内容

Question

只是一个小问题，因为我在原地转圈。

https://jsfiddle.net/sLxvcezv/2/

基本上在 Internet Explorer 中它不会更新我的 span 内容，即使我的输入是有效的。对于其他浏览器，span 内容会发生变化。

就是这样，我希望有人看一下 fiddle 并能帮助我。谢谢

HTML

    <form action="javascript:void(0);" id="formId1" name="validateForm1">
  <table class="inputTables" id="create_trck_table1">
    <thead>
      <tr>
        <th>Attribute</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ID</td>
        <td><input id="id1" maxlength="9" title="e.g AMS30-E3" type="text" required>&nbsp;&nbsp;<span></span></td>
      </tr>
    </tbody>
  </table>
</form>

<p id="myP">
</p>

CSS

input[type="text"]:invalid+span::after {
  color: red;
  content: "X";
}

input[type="text"]:valid+span::after {
  content: "\2713";
  color: limegreen;
}

Javascript (Jquery)

$(':input').on('keydown', function() {
  var valid = $('#id1').is(':valid');
  $('#myP').html('The Input is ' + valid);
})

Answer 1

通过将此添加到 CSS 来修复它

    input[value=""] + span::after 
    {
    content: "";
    }

http://jsfiddle.net/qnt5zew8/