[GPT] 监测输入框被 js 设置了值 ?input 输入框被设置了 value 值,但是没有触发 change 事件?

发布时间 2023-06-11 20:35:50作者: ercom

1. input 输入框被设置了 value 值,但是没有触发 change 事件 ?

如果输入框的 value 值是通过 JavaScript 代码直接设置的,那么不会触发 change 事件,这是正常的行为。

change 事件只会在用户手动更改输入框的值并使其失去焦点时触发。

如果输入框的 value 值是通过用户交互(如键盘输入、复制粘贴等)或者浏览器自动填充(如记住密码功能)的方式设置的,那么应该会触发 change 事件。

如果没有触发 change 事件,可能是因为代码中存在 bug 或者事件绑定有问题。

 

2. 如何监测输入框被 js 设置了值

可以使用 MutationObserver 或者自定义事件来监听输入框的值是否被改动。

以下是使用 MutationObserver 的示例代码:

// 获取输入框元素
var input = document.querySelector('#my-input');

// 创建一个 MutationObserver 实例
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
      console.log('输入框的值被修改了');
    }
  });
});

// 监听输入框属性变化
observer.observe(input, { attributes: true });

// 在其他 JS 代码中修改输入框的值
$('#my-input').val('新的值');

以上代码中,我们在其他 JS 代码中使用 jQuery 修改了输入框的值,然后通过 MutationObserver 监听到了输入框的值被修改的事件,并输出了相应的信息。

以下是使用自定义事件的示例代码:

// 获取输入框元素
var input = $('#my-input');

// 绑定自定义事件
input.on('value-set', function() {
  console.log('输入框的值被设置了');
});

// 在其他 JS 代码中修改输入框的值并触发自定义事件
$('#my-input').val('新的值').trigger('value-set');

以上代码中,我们在其他 JS 代码中使用 jQuery 修改了输入框的值,并手动触发了自定义事件。在自定义事件的回调函数中,我们可以处理输入框的值被修改的事件。

 

Link:https://www.cnblogs.com/farwish/p/17473538.html