JS修改input值无法触发onchange事件解决方法

最新推荐文章于 2024-06-23 00:55:54 发布

别急让程序跑一会

最新推荐文章于 2024-06-23 00:55:54 发布

阅读量9.7k

点赞数 5

分类专栏： JAVAWEB

本文链接：https://blog.csdn.net/weixin_35654814/article/details/100554522

版权

JAVAWEB 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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;
        }
    });
};

执行效果：

参考地址：原问题方案链接

别急让程序跑一会

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JS修改input值无法触发onchange事件解决方法

As we all know，input框的change事件是基于失焦事件onblur的，所以如果js操作input的值是没有失焦这个概念的，自然也无法触发onchange事件。解决方案：用js在操作元素中新建一个 _value 的属性，把原来 js 对 value 的操作改为对 _value 属性的操作，这样访问 _value 时，会自动调用 get 函数获取 value 的值，设置 _va...
复制链接

扫一扫

专栏目录