oninput和onpropertychange實時監聽輸入框值的變化

龍恩0707發表於2014-07-30

oninput和onpropertychange實時監聽輸入框值的變化

　　傳統監聽輸入框的做法就是使用keyup、keydown、keypress，或者change事件來實現，但keyup、keydown、keypress事件是隻要完成擊鍵事件後就觸發，不考慮輸入框的值是否變化，也監聽不了使用滑鼠右鍵[剪貼]和[貼上]這些操作，更監聽不了使用JS動態改變值的變化。而change事件必須是焦點離開輸入框後才觸發，並不能實時監聽。所以這幾個事件來監聽輸入框值變化並不完美。ie瀏覽器(ie6-8)可以直接使用onpropertychange事件來實時監聽(包括JS動態改變值)，而標準瀏覽器(包括IE9+)可以使用HTML5薪增的oninput事件來監聽，但是oninput並不能監聽JS動態改變的值，網上雖然有很多方面的資料，很是很多都沒有講到監聽JS動態改變值，碰巧今天同事做手機端碰到這個問題問到我，所以就總結了下！

JSFiddler效果如下：

你可以狠狠的點選這裡：監聽輸入框值的變化

IE下onpropertychange實時監聽輸入框值的變化

      首先我們可以做個簡單的demo來測試下，程式碼如下：

      HTML程式碼：

<h2>IE6-8監聽輸入框值的變化--onpropertychange事件，可以監聽到js動態設定值</h2>
<input type="text" id="input" />
<div id="value" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>

    JS程式碼：

//  相容IE下(IE6-8) 鍵盤事件 IE9不支援此事件
$("#input").bind("propertychange",function(e){
    var value = $(e.target).val();
    $("#value").html(value);
});
// 相容IE下 動態改變輸入框值 是否監聽到？
$("#input").val("11");

onpropertychange監聽的是元素的property屬性，並不只侷限於value，也可以監聽其他標準屬性值，如：input的name值，效果可以看JSfiddler上面的連結。

標準瀏覽器下oninput實時監聽輸入框值的變化

  HTML程式碼如下：

<!-- IE9+標準瀏覽器  -->
<h2>標準瀏覽器監聽輸入框值的變化--oninput事件，不能監聽到js動態設定值,但是可以監聽到鍵盤事件值的變化</h2>
<input type="text" id="input2" />
<div id="value2" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>

JS程式碼如下：

// 相容標準瀏覽器 chrome firefox IE9+等 但是動態設定值並不支援
$("#input2").bind('input',function(e){
    var value = $(e.target).val();
    $("#value2").html(value);
});
// 相容標準瀏覽器下 動態改變輸入框值 是否監聽到？
$("#input2").val("11");

標準瀏覽器下使用oninput事件也可以監聽輸入框值的變化，但是他和IE的onpropertychange事件有點不同：

  oninput不能監聽JS動態改變的屬性或者值。特別是想在移動開發上使用這個事件，但是糾結的不能監聽到這個事件。

使用定時器功能來監聽各個瀏覽器輸入框值的變化(包括JS動態改變值或者屬性)。

 HTML程式碼如下：

<h2>下面是對瀏覽器做相容性處理，使用定時器</h2>
<input type="text" id="input3" />
<div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>

JS程式碼如下：

// 相容各個瀏覽器下
var timer = 0,
    curVal = "";
$("#input3").bind("propertychange input",function(e){
    if(timer){
        clearInterval(timer);
        timer = 0;
    }
    curVal = $(e.target).val();
    $("#value3").html(curVal);
    interval();
});

function interval(){
    timer = setInterval(function() {
        if (curVal != $("#input3").val()) {
            curVal = $("#input3").val();                                 
　　　　     $("#value3").html($("#input3").val());
         }
    }, 100);
}
interval();
// 相容各個瀏覽器下 動態改變輸入框值 
$("#input3").val("11");

如上，使用定時器去不斷檢測值是否和當前值是否相等。

模擬valuechange事件變化，監聽input，textarea等之前值，之後值得變化。

     valuechange事件是自定義事件的，有上面的監聽當前值改變，為什麼還要這個事件呢？那是因為比如輸入框或者文字域，我想監聽輸入框之前的值和現在的值得話，那麼上面的方法不好監聽，監聽不到，所以就再次封裝了下，可以實時監聽input或者textarea等之前值和之後值得功能。

    思路：正常的情況下還是和上面一樣 用這兩個事件 propertychange input 就可以監聽鍵盤操作的事件了，但是標準瀏覽器對input事件，比如動態改變值得時候 監聽不到，所以用了一個定時器不斷的檢測，如果值不相等的話，那麼就執行回撥函式，返回之前的值和之後的值。下面我們可以先看看jsFiddler效果吧！

 你可以狠狠的點選這裡：  valueChange事件動態監聽輸入框input或者textarea之前值和現在值得變化！

下面是基本的HTML程式碼如下：

 

<h2>下面是對瀏覽器做相容性處理，使用定時器</h2>
<input type="text" id="input3" />
<div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
<div class="clickme" data-value="11">點選我1,我的值為11</div>
<div class="clickme" data-value="22">點選我2，我的值為22</div>

 

JS程式碼如下：

function valuechange(element,callback) {
    var timer = 0,
          prevVal = $(element).val();
        timer = 0;
        if(timer){
            clearInterval(timer);
            timer = 0;
        }    
        timer = setInterval(function(){
            if(prevVal != $(element).val()) {
                if(prevVal == '') {
                    prevVal = undefined;
                }
                callback(prevVal,$(element).val());
                prevVal = $(element).val();
            }
        },100);

        $(element).bind("propertychange input",function(e){
            if(prevVal != $(e.target).val()) {
                if(prevVal == '') {
                    prevVal = undefined;
                }
                callback(prevVal,$(e.target).val());
                prevVal = $(e.target).val();
            }
        });
    }
    valuechange('#input3',function(prev,cur){
        $("#value3").html("之前的值是:"+prev+"當前的值"+cur);
    });
    // 動態js設定值
    $(".clickme").click(function(e){
        var value = $(e.target).attr("data-value");
        $("#input3").val(value);
    });

 

相關文章