实时统计字数--你知道几种
2017-02-07 本文已影响0人
张chuner
实时统计字数，一个小而常见的功能，每一个方法各有利弊甚至不完善的地方，由简到精列举几个简单布局直接输出的小方法。
1、onkeydown
存在问题：键盘按下的时候，当前正在输入的内容，文本框未计数
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
oT1.onkeydown=function(){
var t1=oT1.value;
document.wirte=t1.length;
};
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
2、onkeyup
存在问题：如果按键一直按下，文本框不计数
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
oT1.onkeyup=function(){
var t1=oT1.value;
document.wirte=t1.length;
};
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
3、onkeyup=onkeydown
存在问题：开始时，按键一直按下的时候有一点卡顿
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
oT1.onkeyup=oT1.onkeydown=function(){
var t1=oT1.value;
document.wirte=t1.length;
};
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
4、oninput
存在问题：IE9 删除有问题 删除时value长度不改变，清空后才变为0； iE8- 没有此方法
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
oT1.oninput=function(){
var t1=oT1.value;
document.wirte=t1.length;
};
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
5、onpropertychange
存在问题：兼容 IE系列，但是IE9 删除有问题
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
oT1.onpropertychange=function(){
var t1=oT1.value;
document.wirte=t1.length;
};
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
6、oT1.oninput=oT1.onpropertychange
存在问题：IE9删除有问题
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
oT1.onpropertychange=oT1.onkeydown=function(){
var t1=oT1.value;
document.wirte=t1.length;
};
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
7、定时器、onfocus、onblur
存在问题：定时器性能不好
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
var timer=null;
oT1.onfocus=function(){
timer=setInterval(function(){
document.title=oT1.value.length;
},30);
};
oT1.onblur=function(){
clearInterval(timer);
}
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
8、定时器(IE9)、oT1.oninput=oT1.onpropertychange
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
if(navigator.userAgent.indexOf('MSIE 9.0')!=-1){
var timer=null;
oT1.onfocus=function(){
timer=setInterval(function(){
document.title=oT1.value.length;
},30);
};
oT1.onblur=function(){
clearInterval(timer);
}
}else{
oT1.onpropertychange=oT1.oninput=function(){
var t1=oT1.value;
document.title=t1.length;
};
}
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
如果考虑字节问题，添加一“增强版”
<script>
window.onload=function(){
var oT1=document.getElementById('t1');
function count(){
var t1=oT1.value;
var n=0;
for(var i=0;i<t1.length;i++){
//内容对应的编码 0x4e00~0x9fa5 汉字范围
//utf-8一个汉字占三个字节 gb2312一个汉字占两个字节
if(t1.charCodeAt(i)>='0x4e00' && t1.charCodeAt(i)<='0x9fa5'){
n+=3;
}else{
n++;
}
}
document.write=n;
}
if(navigator.userAgent.indexOf('MSIE 9.0')!=-1){
var timer=null;
oT1.onfocus=function(){
timer=setInterval(function(){
count();
},30);
};
oT1.onblur=function(){
clearInterval(timer);
}
}else{
oT1.onpropertychange=oT1.oninput=function(){
count();
};
}
};
</script>
<body>
<input type="text" name="" id="t1"/>
</body>
