检测输入框字数的变化 注意onpropertychange oninput onchange onkeyup区别
做如下图这样一个输入框，并实时监测输入框中的字数变化，因此用到了onpropertychange事件，oninput事件，下面便对这些事件做如下分析。
onpropertychange：DOM任何节点的属性发生变化时触发，包括js修改的属性。但是这是IE特有的一个事件；
oninput：仅仅在input的value值发生改变才会触发，鼠标键盘复制粘贴均可以触发，但是js修改其value值则不会触发。（chrome/safari/ff/opera/IE9+）
onchange：域的内容改变，并且失去焦点时触发（js改变其内容时不会触发）。
onkeyup：在键盘松开时触发。(如果用鼠标复制粘贴则不会触发)
在textarea中，如果想捕获用户的键盘输入，用onkeyup检查事件就可以了，但是onkeyup并不支持复制和粘贴，因此需要动态监测textarea中值的变化，这就需要onpropertychange（用在IE浏览器）和oninput（非IE浏览器）结合在一起使用了。
下面附上代码：
html css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5 <title>实时动态检测input字数</title> 6 <style type="text/css"> 7 .titlesec{ 8 background-color:#e5eef8; 9 font-size:14px; 10 font-weight:bold; 11 padding:5px 27px; 12 } 13 .titlesec span{ 14 font-size:12px; 15 color:#5c93be; 16 font-weight:normal; 17 vertical-align:middle; 18 } 19 .editnr{ 20 padding:20px; 21 text-align:center; 22 } 23 textarea.editcom{ 24 border:1px solid #9ec7e7; 25 color:#7f7f7f; 26 padding:6px; 27 width:98%; 28 font-size:9pt; 29 height:80px; 30 overflow:auto;} 31 </style> 32 33 </head> 34 <body> 35 <div class="titlesec"> 36 我要评论：<span id="comLen" >您还可以录入300字</span> 37 </div> 38 <div class="editnr"> 39 <textarea id="editcom"class="editcom">请您输入内容</textarea> 40 <input type="button" value="submit"/> 41 </div> 42 </body> 43 </html>
script
<script type="text/javascript">
var EventObject={
keyPress:function(){
var maxLen=300;
var text=obj.value;
var len=text.length;
if(len>maxLen){
alert("您输入的内容已超出限制！");
obj.value=text.substring(0,maxLen);
len=0;
} else{
len=maxLen-len;
}
document.getElementById("comLen").innerHTML="您还可以录入" + len + "字";
},
onfocus:function(){
var value=obj.value;
if(value.trim()=='请您输入内容')
obj.value='';
event.cancelBubble = true;
return false;
},
onblur:function(){
var value=obj.value;
if(value.trim()=='')
obj.value='请您输入内容';
}
};
//去除空格
String.prototype={
trim:function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
trimLeft: function () {
return this.replace(/(^\s*)/g, "");
},
trimRight:function(){
return this.replace(/(\s*$)/g, "");
}
};
var obj=document.getElementById("editcom");
// obj.onpropertychange=EventObject.keyPress;
obj.onfocus = EventObject.onfocus;
obj.onblur=EventObject.onblur;
if(window.ActiveXObject) {//IE
obj.onpropertychange= EventObject.keyPress;
}else{//非IE
obj.oninput=EventObject.keypress;
}
</script>
附言：小妹2014年毕业现在还在实习阶段，以上内容如有错请各位大神多多指点。
