ie9以下onchange事件不能触发的问题 - 酸溜土豆丝-web前端学习博客

ie9以下用事件委托来管理onchange事件不能触发onchange事件，其他浏览器正常

实现类似自动换焦点的功能，刚开始想用的是委托事件给form表单添加onchange事件但是ie9以下不能触发onchange事件。
原始代码
js部分

case "change":
           target.value.length == target.maxLength ? target.parentNode.lastChild.className = "fa fa-check" : target.parentNode.lastChild.className = "";
           break;

原始全代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.css" />-->
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
  </head>
  <body>
    <textarea id="box" contenteditable style="width: 100px;height: 100px;border: 1px solid black; word-break:break-all;overflow: auto;resize: none;">
    </textarea>
    <form action="" method="post">
      <table>
        <tr>
          <td><input type="text" name="text1" maxlength="3" autofocus tabindex="-1" /><i style='color:green'></i></td>
        </tr>
        <tr>
          <td><input type="text" name="text2" maxlength="3" /><i style='color:green'></i></td>
        </tr>
        <tr>
          <td><input type="text" name="text3" maxlength="4" /><i style='color:green'></i></td>
        </tr>
        <tr>
          <td>
            <select name="location">
              <option value="a">a</option>
              <option value="b">b</option>
              <option value="c">c</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><input type="submit" id="btn" value="点击" /></td>
        </tr>
      </table>
    </form>
    <script src="js/Base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var base = new Base();
      var form = document.forms[0];
      var txt = form.elements[0];
      window.onload = function() {
        txt.focus();
      };
      var fn = function(event) {
        event = base.getEvent(event);
        var target = base.getTarget(event);
        var hasFocus = document.hasFocus() &&
          document.activeElement === target;
        console.log(document.activeElement.name)
        switch(event.type) {
          case "keypress":
            base.tabForward(event);
            base.forBiddenInput(form, event, true);
            break;
          case "paste":
            base.forBiddenPaste(event, true);
            break;
          case "change":
            target.value.length == target.maxLength ? target.parentNode.lastChild.className = "fa fa-check" : target.parentNode.lastChild.className = "";
            break;
        }
      }
      form.onkeypress = fn;
      form.onpaste = fn;
      form.onchange = fn;
    </script>
  </body>
</html>

修改后的代码,只能将form的每个input字段都添加onchange事件。这样ie9以下没问题。
js核心代码

var txts = form.elements["text"];
  for(var i = 0; i < txts.length; i++) {
    txts[i].onchange = function(event) {
      event = base.getEvent(event);
      var target = base.getTarget(event);
      target.value.length == target.maxLength ? target.parentNode.lastChild.className = "fa fa-check" : target.parentNode.lastChild.className = "";
    }
  }

修改后的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="4.2.0/css/font-awesome.css" />
    <!--[if IE 7]> <link rel="stylesheet" href="4.2.0/css/font-awesome-ie7.min.css"> <![endif]-->
  </head>
  <body>
    <form action="" method="post">
      <table>
        <tr>
          <td><input type="text" name="text" maxlength="3" autofocus tabindex="-1" /><i style='color:green'></i></td>
        </tr>
        <tr>
          <td><input type="text" name="text" maxlength="3" /><i style='color:green'></i></td>
        </tr>
        <tr>
          <td><input type="text" name="text" maxlength="4" /><i style='color:green'></i></td>
        </tr>
      </table>
    </form>
    <script src="js/Base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var base = new Base();
      var form = document.forms[0];
      var txt = form.elements[0];
      window.onload = function() {
        txt.focus();
      };
      var fn = function(event) {
        event = base.getEvent(event);
        switch(event.type) {
          case "keypress":
            base.tabForward(event);
            base.forBiddenInput(form, event, true);
            break;
          case "paste":
            base.forBiddenPaste(event, true);
            break;
        }
      }
      form.onkeypress = fn;
      form.onpaste = fn;
      var txts = form.elements["text"];
      for(var i = 0; i < txts.length; i++) {
        txts[i].onchange = function(event) {
          event = base.getEvent(event);
          var target = base.getTarget(event);
          target.value.length == target.maxLength ? target.parentNode.lastChild.className = "fa fa-check" : target.parentNode.lastChild.className = "";
        }
      }
    </script>
  </body>
</html>

Base.js是我自行封装的代码，若需要可以联系我！！

Tags: js, onchange