As we all know,input框的change事件是基于失焦事件onblur的,所以如果js操作input的值是没有失焦这个概念的,自然也无法触发onchange事件。
解决方案:用js在操作元素中新建一个 _value 的属性,把原来 js 对 value 的操作改为对 _value 属性的操作,这样访问 _value 时,会自动调用 get 函数获取 value 的值,设置 _value 属性时,会自动调用 set 函数设置 value 属性的值,你可以将你的程序绑定在 get/set 函数中,这样就可以监听 js 修改 value 数据的变化;
如果直接设置 value 属性为 访问器属性,结果会造成,用户在页面修改了 value,不会调用 set 函数,所以新加了上面的中介 _value。
参考代码HTML
<body>
<input type="text" id="demo"/>
</body>
JS代码
window.onload = function() {
let input = document.getElementById('demo');
function oninputCallback() {
console.log('oninput event ');
}
function onchangeCallback() {
console.log('onchange event');
}
input.addEventListener('oninput', oninputCallback, false);
input.addEventListener('onchange', onchangeCallback, false);
Object.defineProperty(input, '_value', {
configurable: true,
set: function(value) {
this.value = value;
oninputCallback();
onchangeCallback();
},
get: function() {
return this.value;
}
});
};
执行效果:
参考地址:原问题方案链接