title: Detect input value change with MutationObserver
body: <p>I want to detect when text/value change in input field. Even if I change the value with js, I want to detect that changes.</p>
  
  <p>Here's what I've tried so far in <a href="https://jsfiddle.net/v0xfwk5p/1/" rel="noreferrer">demo in fiddle</a>.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" id="exNumber"/&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // console.log('Mutation type: ' + mutation.type);
      if ( mutation.type == 'childList' ) {
        if (mutation.addedNodes.length &gt;= 1) {
          if (mutation.addedNodes[0].nodeName != '#text') {
             // console.log('Added ' + mutation.addedNodes[0].tagName + ' tag.');
          }
        }
        else if (mutation.removedNodes.length &gt;= 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);
  </code></pre>