轉載標簽： 實時觸發事件中文個數onpropertychangeoninputonchange |
分類： 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); \/\/每次減去字符長度
});
補充回答：
再補充下關於幾個事件的區別：
1、onchange事件與onpropertychange事件的區別：
onchange事件在內容改變（兩次內容有可能還是相等的）且失去焦點時觸發；onpropertychange事件卻是實時觸發，即每增加或刪除一個字符就會觸發，通過js改變也會觸發該事件，但是該事件IE專有。
2、oninput事件與onpropertychange事件的區別：
oninput事件是IE之外的大多數瀏覽器支持的事件，在value改變時觸發，實時的，即每增加或刪除一個字符就會觸發，然而通過js改變value時，卻不會觸發；onpropertychange事件是任何屬性改變都會觸發的，而oninput卻只在value改變時觸發，oninput要通過addEventListener()來注冊，onpropertychange注冊方式跟一般事件一樣。（此處都是指在js中動態綁定事件，以實現內容與行為分離）
3、oninput與onpropertychange失效的情況：
（1）oninput事件：a). 當腳本中改變value時，不會觸發；b). 從瀏覽器的自動下拉提示中選取時，不會觸發。
（2）onpropertychange事件：當input設置為disable=true后，onpropertychange不會觸發。