请问如何监听一个页面所有的input值的变化，包括type="hidden" 隐藏的input？

我们后台有页面，需要监听用户是否新增或者编辑，或者删除 修改等操作，是否做了这些操作的地方很多，但是唯一的共性是会改变input的值，包括隐藏的input，我们想根据用户是否做了这些操作，在用户离开页面的时候，提示是否离开页面，请问如何实时监听这些input值的变化，后台是jquery开发的，谢谢大家

可以从全局监听change事件来监听

1. document.addEventListener('change', function(){
   
2.     //...
   
3. })

复制代码

但是这种监听对.value赋值的方式无效（change只会对用户手动通过键盘修改的方式触发）

1. input.value = 'xxx' // 不会触发change回调

复制代码

因此，我们需要改写一下原生的.value方法

1. var desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')
   
2. Object.defineProperty(HTMLInputElement.prototype, 'value', {
   
3.     ...desc,
   
4.     set(v) {
   
5.         console.log('set',v);
   
6.         desc.set.call(this, v)
   
7.     }
   
8. })

复制代码

这样所有只要有value改变都可以监听到了

水煮鱼 发表于 2022-10-23 21:21
可以从全局监听change事件来监听
但是这种监听对.value赋值的方式无效（change只会对用户手动通过键盘修改 ...

问题解决了, 多谢