js监听input输入框值的实时变化实例

时间:2023-12-05 20:25:56

情景:监听input输入框值的实时变化实例

解决方法:1.在元素上同时绑定oninput和onporpertychanger事件

实例:<script type="text/JavaScript">

  function watch(){

  consolo.log("in")

}

</script>

<input type="text"  oninput="watch(event)" onporpertychange="watch(event)" />

2.原生js

<script type="text/javascript">
 $(function(){
   if("\v"=="v"){//true为IE浏览器,感兴趣的同学可以去搜下,据说是现有最流行的判断浏览器的方法
    document.getElementById("a").attachEvent("onporpertychange",function(e){
    console.log("inputting!!");
    }
  }else{
    document.getElementById("a").addEventListener("onporpertychange",function(e){
    console.log("inputting!!");
    }
  }
});
</script>
<input type="text" id="a"/>
3.使用jQuery绑定事件
<script type="text/javascript">
 $(function(){
  $("#a").bind('input porpertychange',function(){
    console.log("e");
    });
  });
</script>
<input type="text" id="a"/>