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

作者: 勿念及时雨 | 来源:发表于2019-08-22 00:09 被阅读0次

要想实现实时监听input输入框值的变化的效果，只需要让input元素监听两个事件：input和propertychange，然后调用对应的js监听函数即可。
先使用原生js代码实现。

<input type="text" oninput="onInputChange(event)" onpropertychange="onInputChange2(event)" />

<script type="text/javascript">
  function onInputChange(event){
    console.log(event.target.value);
  }

  function onInputChange2(event){
    if(event.propertyName.toLowerCase()=="value"){
      console.log(event.srcElement.value);
    }
  }
</script>

jQuery的实现代码要比原生js简洁很多在，这里推荐使用jQuery实现。

<input type="text" id="input" />

<script type="text/javascript">
  $("#input").on("input propertychange",function(event){
    console.log($(this).val());
  });
</script>