监听input输入值变化的方案

水平有限，如有错误，欢迎指正。

一、改变input的输入值的情况：

1. 用户键盘输入
2. 鼠标右键复制、剪切、黏贴
3. 快捷键复制、剪切、黏贴

4. js获取元素后赋值

   document.getElementsByTagName("input")[0].value=0;

二、常用方法：

• onkeydown、onkeypress、onkeyup（键盘事件）：通过键盘输入触发。

  function onKeyUpHandler(val){
     console.log(val);
  }

  <input type="text" placeholder="please input your age" 
  onkeyup="onKeyUpHandler(this.value)"/>
  

  限制：情况2、4不能触发监听事件，3重复触发（由于复制等操作快捷键是组合键，会导致触发两次监听事件）。

---

• onchange：触发机制如下：

  • 1.input捕获到焦点时，存储当前值；
  • 2.input焦点离开后，判断当前值与存储的是否不同，不同就触发onchange事件。

  function onChangeHandler(val){
      console.log(val);
  }

  <input type="text" placeholder="please input your age" 
  onchange="onChangeHandler(this.value)"/>

  限制：并非实时监听，情况4不能触发，1、2、3的触发都必须让input失去焦点（比如在input区域外点击）

---

• oninput + onpropertychange：目前使用率最高的解决方案，兼容性强

  // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
  function onInputHandler(event) {
      console.log("得到"+event.target.value);
  }
  // Internet Explorer
  function onPropertyChangeHandler(event) {
      if (event.propertyName.toLowerCase () == "value") {
          console.log(event.srcElement.value);
      }
  }

  <input type="text" placeholder="please input your age" 
  oninput="onInputHandler(event)" 
  onpropertychange="onPropertyChangeHandler(event)"/>

  附jQuery实现

  限制：除情况4以外都能实时触发。

附录：对于情况4可参考以下解决方案：

• 参考提问：JavaScript动态的改变input的value属性时，如何自动触发oninput、onchange事件？

  • 可借鉴双向绑定使用的Object.defineProperty()方法实现——xianshenglu的回答
  • 原生js可使用事件构造器——Cribug8080的回答

• jQuery可使用trigger()方法触发事件

  $("#inputId").val(33);
  $("#inputId").trigger("oninput");