jquery change() 监听readonly 的 input
时间: 2023-09-22 09:07:45 浏览: 55
如果 input 元素的 `readonly` 属性为 `true`,则不能直接修改其 value 值,但可以通过其他方式来改变它,例如通过 JavaScript 或 jQuery 来修改其 value 值。虽然 `change()` 方法可以监听 input 元素的 value 值变化,但它无法监听 `readonly` 属性元素的 value 值变化。
因此,我们可以使用 `setInterval()` 方法来定时检测 input 元素的 value 值是否有变化,或者使用 `MutationObserver` 来监听 input 元素的属性变化。
例如,使用 `setInterval()` 方法:
```javascript
var previousValue = $('input[readonly]').val();
setInterval(function() {
var currentValue = $('input[readonly]').val();
if(currentValue !== previousValue) {
console.log('input的value值变化了');
previousValue = currentValue;
}
}, 100); // 每100毫秒检测一次
```
这里使用了一个变量 `previousValue` 来存储上一次检测到的 value 值,然后使用 `setInterval()` 方法每隔一定时间检测一次 value 值是否有变化,如果变化了就触发相应的回调函数。
或者,使用 `MutationObserver` 方法:
```javascript
var targetNode = $('input[readonly]').get(0);
var observer = new MutationObserver(function() {
console.log('input的value值变化了');
});
var config = { attributes: true, childList: false, characterData: false, attributeFilter: ['value'] };
observer.observe(targetNode, config);
```
这里使用了 `MutationObserver` 方法来监听 input 元素的属性变化,其中 `attributes` 属性设置为 `true` 表示要监听属性变化,`attributeFilter` 属性设置为 `['value']` 表示要监听 value 属性的变化。每次监听到 value 值变化时,就会触发相应的回调函数。