jquery 如何监听 readonly的input value变化
时间: 2023-08-08 18:09:12 浏览: 65
如果要监听`readonly`的`input`的`value`变化,可以使用`MutationObserver`,它可以监听DOM树的变化并作出相应的反应。代码如下:
```javascript
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
// value属性值发生改变
// 处理逻辑
}
});
});
var target = $('input')[0];
var config = { attributes: true };
observer.observe(target, config);
```
在上面的代码中,我们创建了一个`MutationObserver`对象,并且使用`observe`方法监听了`input`元素的变化。当`input`元素的`value`属性发生改变时,`MutationObserver`会检测到这个变化并且执行相应的处理逻辑。
相关问题
jquery 监听readonly 的input value变化
如果 input 元素的 `readonly` 属性为 `true`,则不能直接修改其 value 值,但可以通过其他方式来改变它,例如通过 JavaScript 或 jQuery 来修改其 value 值。因此,我们可以使用 `setInterval()` 方法来定时检测 input 元素的 value 值是否有变化。
例如,使用 `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 值是否有变化,如果变化了就触发相应的回调函数。
jquery change() 监听readonly 的 input
如果 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 值变化时,就会触发相应的回调函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)