JavaScript使用MutationObserver来检测输入标签中的值更改 [英] javascript use MutationObserver to detect value change in input tag

问题描述

我想在输入字段中检测文本/值的更改时间。因此，我阅读了大量示例并尝试了下面的代码。但它不起作用。 fiddle preview .even如果我通过js代码更改值，我想检测到这些更改。 p>

 < input type =textid =exNumber/> 
  

javascript

  var observer = new MutationObserver（function（mutations）{
 mutations.forEach（function（mutation）{
 // console.log（'Mutation type：'+ mutation.type）; 
 if（mutation.type =='childList'）{
 if（mutation.addedNodes.length> = 1）{
 if（mutation.addedNodes [0] .nodeName！='＃文本'）{
 // console.log（'Added'+ mutation.addedNodes [0] .tagName +'tag。'）; 
} 
} 
 else if（ ）
 // console.log（'Removed'+ mutation.removedNodes [0] .tagName +'tag。'）
} 
} 
 if（mutation.type =='attributes'）{
 console.log（'Modified'+ mutation.attributeName +'attribute。'）
} 
}）; 
}）; 
 
 var observerConfig = {
属性：true，
 childList：false，
 characterData：false 
}; 
 
 //监听所有对body和child节点的修改
 var targetNode = document.getElementById（exNumber）; 
 observer.observe（targetNode，observerConfig）; 
  

解决方案

了解发生了什么是清除属性（内容属性）和属性（IDL属性）之间的区别。我不会在这方面进行扩展，因为在这方面已经有很好的答案涵盖了这个主题：

• HTML中的属性和属性




• .setAttribute vs .attribute =？

当您通过键入或通过JS更改输入元素的内容时：

  targetNode.value = foo 的; 
  

浏览器更新值 属性而不是值 属性（它反映了 defaultValue 属性）。
$ b

然后，如果我们看一下 MutationObserver规范，我们将看到属性是可以使用的对象成员之一。因此，如果您显式设置值属性：

  targetNode.setAttribute（ 价值，富）; 
  

MutationObserver会通知属性修改。但是在规范列表中没有像属性：值属性无法被观察。 p>

如果您想要检测用户何时更改输入元素的内容， setInterval 并将新值与旧值进行比较。

检查 SO问题了解不同的替代方案及其局限性。

i want to detect when text/value change in input field.so i read lot of examples and try following code.but it doesn't work .here is fiddle preview .even if i change value by js code i want to detect that changes.

html

<input type="text" id="exNumber"/>

javascript

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // console.log('Mutation type: ' + mutation.type);
    if ( mutation.type == 'childList' ) {
      if (mutation.addedNodes.length >= 1) {
        if (mutation.addedNodes[0].nodeName != '#text') {
//        console.log('Added ' + mutation.addedNodes[0].tagName + ' tag.');
        }
      }
      else if (mutation.removedNodes.length >= 1) {
       // console.log('Removed ' + mutation.removedNodes[0].tagName + ' tag.')
      }
    }
     if (mutation.type == 'attributes') {
      console.log('Modified ' + mutation.attributeName + ' attribute.')
    }
        });   
});

var observerConfig = {
        attributes: true,
        childList: false,
        characterData: false
};

// Listen to all changes to body and child nodes
var targetNode = document.getElementById("exNumber");
observer.observe(targetNode, observerConfig);

解决方案

To understand what is going on is necessary to clear up the difference between attribute (content attribute) and property (IDL attribute). I won't expand on this as in SO there are already excellent answers covering the topic:

• Properties and Attributes in HTML
• .prop() vs .attr()
• What is happening behind .setAttribute vs .attribute=?

When you change the content of a input element, by typing in or by JS:

targetNode.value="foo";

the browser updates the value property but not the value attribute (which reflects the defaultValue property instead).

Then, if we look at the spec of MutationObserver, we will see that attributes is one of the object members that can be used. So if you explicitly set the value attribute:

targetNode.setAttribute("value", "foo");

MutationObserver will notify an attribute modification. But there is nothing like properties in the list of the spec: the value property can not be observed.

If you want to detect when an user alters the content of your input element, the input event is the most straightforward way. If you need to catch JS modifications, go for setInterval and compare the new value with the old one.

Check this SO question to know about different alternatives and its limitations.

这篇关于JavaScript使用MutationObserver来检测输入标签中的值更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！