js動態改變input的值不觸發input的change事件的解決辦法

時間 2019-11-06

標籤動態改變 input 觸發 change 事件解決辦法欄目 JavaScript 简体版

原文原文鏈接

看了網上的資料也比較雜，本身也作一個整理共享一下解決方案javascript

1.原生js的改變以後手動添加監聽

<body>
    <input type="hidden" id="ttt" /><br/>
    <select id="eee" >
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</body>
<script type="text/javascript">
        var ttt =  document.getElementById("ttt");
        var eee =  document.getElementById("eee");
        eee.onchange=function (){
            ttt.value=eee.value;
            ttt.addEventListener("input",changeValue(),false);
        }
        function changeValue(){
            alert(ttt.value);
        }
</script>

須要注意的是，ttt添加的監聽的方法名必定要加（），就是在eee的change事件觸發的是否給ttt賦值，而且手動觸發ttt的change事件java

2.添加自定義屬性觸發事件

<body>
    <input type="hidden" id="ttt" /><br/>
    <select id="eee" >
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</body>
<script type="text/javascript">
        var ttt =  document.getElementById("ttt");
        var eee =  document.getElementById("eee");
        eee.onchange=function (){
            ttt._value=eee.value;
        }
        Object.defineProperty(ttt,"_value",{
        	configurable:true,
        	set:function(value){
        		this.value = value;
        		changeValue();
        	},
        	get:function(){
        	    return this.value;	
        	}
        });
        function changeValue(){
            alert(ttt.value);
        }
</script>

這種方式不須要添加監聽，是經過添加自定義屬性而且在自定義屬性的set方法裏觸發input的值改變事件jquery

3.jquery的手動觸發input改變事件

<body>
    <input type="text" id="two" /><br/>
    <select id="three" >
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input type="hidden" id="one" />
    <input type="hidden" id="four" />
    <input type="text" id="five" />
	</body>
	<script type="text/javascript">
    	$("#two").on("change",function(){
    		~!($("#one").val())>-2 ? alert($("#one").val()) : ($("#one").on("change",function(){
    		alert($(this).val());
    	}));
    	});
    	$("#three").on("change",function(){
    		$("#two").val($(this).val());
    		$("#two").change();
    	});
    	
    	var index = 0;
    	setInterval(function(){
    		index ++;
    		$("#five").val(index);
    		if (index == 10) {
    			$("#one").val($("#three").val());
    			$("#one").change();
    		}
    	},1000);
    </script>

這種方式是在值改變的時候手動觸發change事件，這裏的代碼是select框的值改變了，而且當#one這個input框有值了才觸發，就是知足兩個事件才執行app

4.最終解決辦法（推薦一篇文章）

Object.defineProperty(document.getElementById("id"),"value",{
set:(v)=>{
document.getElementById("id").setAttribute("value",v);
/**
*觸發chang事件的代碼
*/
});

原來的哪幾種方法，侷限性太多，經過重寫原形屬性的setter方法，實現動態change事件的觸發，目前爲止，我以爲最好的解決辦法。this

5.超級最終解決辦法

我仍是太年輕了，第四種方法有一個很大的弊端，就是手動更改input框數據的時候是不會觸發setter方法的，只有js調用了賦值操做纔會進，因此，又有了下一個方法spa

(function($) {
	const o = $.fn.val;
	$.fn.val = function() {
		const r = o.apply(this, arguments);
		if (this點is("#id") && arguments.length > 0) {
			this.trigger("change");
		}
		return r;
	}
})(jQuery);

這個方法，依賴於jQuery，而且js中動態賦值都只能用val，這個方法才生效。code

主要的邏輯就是從新jquery的val方法，在方法體中觸發input的change事件。three

把這個方法拷貝到你的js的文件頂端就能夠生效了，有中文的點是由於不用中文，立馬報敏感字符... 事件