【整合】input標簽JS改變Value事件處理方法

本文轉載自查看原文 2016-09-10 07:54 11090 前端/ Jquery

　　某人需要在時間控件給文本框賦值時，觸發事件函數。實現的效果：

　　1、文本框支持手工輸入，通過用戶輸入修改值，手工輸入結束后觸發事件。阻塞在於失去焦點后才觸發（輸入過程中不觸發事件）

　　2、通過JS方法修改值，修改后觸發事件。重點阻塞在於此（JS賦值要觸發）

　　最終采用方案：

　　1、IE（IE8及以下）下使用onpropertychange實現JS賦值后觸發事件

　　2、需求是手工輸入結束后才觸發事件，避免在文本框實時輸入文字的時候也因為onpropertychange觸發事件，在trigger之前判斷當前焦點位置。這樣onpropertychange就對手工輸入無效；

　　3、實現手工輸入結束后要觸發事件，使用onchange事件

　　1、其他瀏覽器中也可以使用onchange模擬輸入結束后觸發事件，但是沒法使用onpropertychange事件。使用定時器模擬效果

<!DOCTYPE HTML> 
<html> 
<head>
<meta http-equiv="Content-Type"; content="text/html; charset=utf-8"> 
<script type="text/javascript" src="jquery-1.9.1.min.js" charset="utf-8"></script>
<script>
function init(){
    //每次點擊給不一樣的值
    var i=0;
    $("#testchange").on("click",function(){
        $("#name").val(i);
        i++;
    });
    var jsDate = "";
    
    if(document.all){//ie8及以下
        $("#name").on("change",function(){
            console.log(i);//改變值后要觸發的代碼
        });
        
        $('input[type="text"]').each(function() {
            var that=this;
            if(this.attachEvent) {
                this.attachEvent('onpropertychange',function(e) {
                    if($("#name").is(":focus")) return;
                    if(e.propertyName!='value') return;
                    debugger;
                    $(that).trigger('change');
                });
            }
        })
    } else {//非ie和IE9以上
        var intervalName;
        intervalName = setInterval(handle,100);
        function handle(){
            if($("#name").val() != jsDate && !$("#name").is(":focus")){//模擬失去焦點后時才會觸發
                jsDate = $("#name").val();
                console.log(i + " oninput");//改變值后要觸發的代碼
            }
        };
    }
}
</script>
</head> 
<body onload ="init();"> 
    <button id="testchange">JS賦值</button>
    <label>文本框：</label><input type="text" id="name"/>
</body> 
</html>