快捷導(dǎo)航

輸入框的字數(shù)時時統(tǒng)計—關(guān)于 onpropertychange 和 oninput 使用

更新時間：2011年10月21日 14:43:10 作者：

做一個輸入框的字符統(tǒng)計，限制輸入字符數(shù)量，即在輸入框的內(nèi)容發(fā)生變化的時候改統(tǒng)計字符長度。跟新浪微博一樣，統(tǒng)計字符數(shù)量，不超過140字

網(wǎng)上看到很方便實現(xiàn)這個功能的事件：
IE 中的 onpropertychange
非IE中的 oninput
用這兩事件的好處是，當在輸入框的內(nèi)容發(fā)生變化調(diào)用事件，使用key 和 mouse的相關(guān)事件會比較復(fù)雜，而且這個方法用粘貼方法一樣有效。不過用js改變input的value值不會發(fā)生這兩個事件。
在中文本框中添加兩個事件的方法就可以了。（看到網(wǎng)上說非ie中的oninput方法要用addEventListener綁定，用 element.oninput = function(){...}不行，可是我在火狐6中是可以的，不過為了安全起見，這里我還是使用標準的方法 element.addEventListener('input',function(){...})實現(xiàn) ）
在IE中使用 element.attachEvent('onpropertychange', function(){...})方法。不過，因為ie中會判斷所有的屬性發(fā)生變化，這樣會發(fā)生很多不必要的工作，而且有時候會出現(xiàn)問題，無法調(diào)用函數(shù)。所以這里我只對當value屬性發(fā)生變化的時候進行判斷(事件對象的propertyName屬性)，并調(diào)用方法。結(jié)果是：
element.attachEvent('onpropertychange', function(){if(window.event.propertyName == "value"){...})

復(fù)制代碼代碼如下:

 
/* 
參數(shù)： 
length:最大長度 
ele: 輸入對象 
callBack： 回調(diào)方法，參數(shù)len表示當前輸入框內(nèi)容字節(jié)數(shù)， 方法中的this指向ele對 
autoFire: 初使化自動調(diào)用一次 
*/ 
function input_max(length, ele, showEle, callBack,autoFire){ 
if(ele.addEventListener){ 
ele.addEventListener('input', change, false); 
}else{ 
ele.attachEvent('onpropertychange', function(){if(window.event.propertyName == "value"){alert('a');change()}}) 
} 
function change(){ 
var len = Math.ceil(byteLength(ele.value)/2); 
len = len <= length ? len : length - len; 
callBack.call(ele,showEle,len); 
}; 
function byteLength(b) { 
if (typeof b == "undefined") { return 0 } 
var a = b.match(/[^\x00-\x80]/g); 
return (b.length + (!a ? 0 : a.length)) 
}; 
//自動調(diào)用一次 
if(autoFire){change()}; 
}; 
// 回調(diào)函數(shù) 
function input_max_callBack(showEle,len){ 
var note = showEle; 
if (len >= 0 ){ 
note.innerHTML = len ; 
this.style.borderColor = ""; 
this.style.backgroundColor = ""; 
}else{ 
note.innerHTML = "<span class='red b fz_14'>超過" + -len + "</span>"; 
this.style.backgroundColor = "#FFC"; 
this.style.borderColor = "#F00"; 
} 
} 
// 動態(tài)標題 
input_max(30, document.getElementById('news_title'), document.getElementById('news_title_limit'),input_max_callBack,true); 