【Javascript】监测JS脚本发起的input输入框改变

C 2020-4-2 2296

这个问题琢磨得我头都秃了………

问题是这样,使用JS原生的onchange、oninput,甚至用observe,只能监测input输入框手动输入事件,而JS产生的变化是无法监测的。这就非常蛋疼……

幸运地是这个问题我已经解决掉了,回头发代码……

<input id="abc" />
<script>
var input=document.querySelector('#abc');
var getter=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').get;
var setter=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set;
Object.defineProperty(input,'value',{ //修改input原生属性,拦截执行过程,使其可以监听。
configurable:true, //使属性可以被修改。
set(val){ //脚本输入时触发,val是接收到的值。
console.log('触发了set');
setter.call(this,val); //设置输入框value为该值。
},
get(){ //用户输入和脚本输入时均触发。
console.log('触发了get');
return getter.call(this); //返回用户输入的内容。
},
});
</script>

 

最新回复 (2)
  • 2020-4-2
    2

    我只看到了头发

    回 头发 代码……

  • G 2020-4-2
    3

    头发+代码 [em_37]