jquery的實時觸發事件(textarea實時獲取中文個數)

jquery的實時觸發事件(textarea實時獲取中文個數)

  (2014-09-16 11:49:50)

轉載▼

標籤：  實時觸發事件   中文個數   onpropertychange   oninput   onchange

分類： JavaScript

由於onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才能夠激活該事件。

 

若是你須要即時監聽輸入框值的變化，建議使用 onpropertychange 事件！

 

在IE下，當一個HTML元素的屬性改變的時候，都能經過 onpropertychange來即時捕獲。

 

在非IE瀏覽器能夠用 oninput 事件來監聽。

 

舉例以下：

<input name='mytext' id='mytext' />

 

 

function immediately(){

var element = document.getElementByIdx_x("mytext");  \/\/獲取元素對象

if("\v"=="v") {  \/\/判斷是否IE瀏覽器

 

     if(/msie/i.test(navigator.userAgent)) alert('IE Browser');    \/\/ie瀏覽器 

 

     element.onpropertychange = myfun;   \/\/ IE的話添加onpropertychange 事件

}else{

     element.addEventListener("input",myfun,false);  \/\/非IE的話用 addEventListener 添加監聽事件

}

function myfun(){

     alert(document.getElementByIdx_x('mytext').value);

}

}

 

上面是JS函數的寫法~直接在頁面的話就是：

<input type="text" name="mytext" oninput="alert(this.value);" onpropertychange="alert(this.value)" />

 

 

固然上面的操做步驟比較繁瑣能夠直接使用jquery的方式來調用。

 

這是用jquery寫的判斷中文輸入字符的個數方法：

$(document).bind('propertychange input', function () {  

        var counter = $('#content').val().length;

        $('#tips var').text(300 - counter);    \/\/每次減去字符長度

});

 

 

補充回答：

再補充下關於幾個事件的區別：

 

一、onchange事件與onpropertychange事件的區別：

onchange事件在內容改變（兩次內容有可能仍是相等的）且失去焦點時觸發；onpropertychange事件倒是實時觸發，即每增長或刪除一個字符就會觸發，經過js改變也會觸發該事件，可是該事件IE專有。

 

二、oninput事件與onpropertychange事件的區別：

oninput事件是IE以外的大多數瀏覽器支持的事件，在value改變時觸發，實時的，即每增長或刪除一個字符就會觸發，然而經過js改變value時，卻不會觸發；onpropertychange事件是任何屬性改變都會觸發的，而oninput卻只在value改變時觸發，oninput要經過addEventListener()來註冊，onpropertychange註冊方式跟通常事件同樣。（此處都是指在js中動態綁定事件，以實現內容與行爲分離）

 

三、oninput與onpropertychange失效的狀況：

（1）oninput事件：a). 當腳本中改變value時，不會觸發；b). 從瀏覽器的自動下拉提示中選取時，不會觸發。

（2）onpropertychange事件：當input設置爲disable=true後，onpropertychange不會觸發。