Observer监听输入框值的变化

html 代码

<input type="text" id="username" name="username" autoComplete='off'>

要监听输入框值的变化可以使用

$('#username').bind('input propertychange', function() {
    console.log($(this).val())
});

在输入框输入值的时候就会触发事件执行相关代码

但是如果我们要监听影藏的输入框，或者监听js、jquery 修改value的值的时候，上面的方式是监听不到的，可以使用下面的方式。

 var username = document.getElementsByName("fdClaimantId")[0] // document.querySelector("#username");
		 var observer = new MutationObserver(function() {
		     console.debug(username.value);
		     if(username.value != null && username.value != ""){
		    	// changePerson()
		     }
		     console.log(username)
		 });
		 //  定义需要监控dom的哪些内容
		 observer.observe(username, {
		     attributes: true,
		     attributeOldValue: false,
		     attributeFilter: ['value'],
		     characterData: true,
		     characterDataOldValue: true
		 });
 	   
 	    }, 1000)

Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。