如何使用jQuery即时检测input元素的readonly属性变更？

方案1：原生MutationObserver实现（无额外依赖） #

该方案不需要引入jQuery或第三方属性监听插件，兼容性覆盖所有现代浏览器，可监听所有text类型input的属性变更：

// 选中所有text类型input，如需覆盖所有input可把选择器改为 input
const allTextInputs = document.querySelectorAll('input[type="text"]');

// 观察者配置：仅监听readonly属性变化
const observerOptions = {
  attributes: true,
  attributeFilter: ['readonly'],
  attributeOldValue: true
};

// 属性变更回调逻辑
const changeHandler = (mutations) => {
  for (const mutation of mutations) {
    const input = mutation.target;
    // 匹配readonly属性被移除的场景
    if (mutation.oldValue !== null && !input.hasAttribute('readonly')) {
      // 此处写入你要执行的操作
      console.log('readonly属性已移除', input);
    }
  }
};

// 给所有input绑定监听
allTextInputs.forEach(input => {
  const observer = new MutationObserver(changeHandler);
  observer.observe(input, observerOptions);
});

如果页面存在动态新增的input，在新增元素的逻辑中给新生成的input绑定上述观察者即可。

方案2：基于你当前使用的attrchange插件调整 #

你原有代码只选中了初始带readonly属性的input，修改选择器覆盖所有input即可：

$('input[type="text"]').attrchange({
  trackValues: true,
  callback: function (event) {
    // 匹配readonly属性被移除的场景
    if (event.attributeName === 'readonly' && event.newValue === null) {
      // 此处写入你要执行的操作
      console.log('readonly属性已移除', this);
    }
  }   
});

内容的提问来源于stack exchange，提问作者Dhia Shalabi