快捷導(dǎo)航

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

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

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

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

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

 
/* 
參數(shù)： 
length:最大長(zhǎng)度 
ele: 輸入對(duì)象 
callBack： 回調(diào)方法，參數(shù)len表示當(dāng)前輸入框內(nèi)容字節(jié)數(shù)， 方法中的this指向ele對(duì) 
autoFire: 初使化自動(dòng)調(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)) 
}; 
//自動(dòng)調(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"; 
} 
} 
// 動(dòng)態(tài)標(biāo)題 
input_max(30, document.getElementById('news_title'), document.getElementById('news_title_limit'),input_max_callBack,true); 