这个问题琢磨得我头都秃了………
问题是这样,使用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>