textarea字数实时统计⽅案
最近了⼀个通过js实时显⽰textarea字数统计的⽅法，稍加修改使它变得更加易⽤，下⾯是效果。拉伸和缩⼩不会影响统计显⽰。提供了两种计算字数⽅式。
具体计算规则可以在js中修改
下⾯是使⽤⽅法，使⽤⾮常简单，只需要引⼊js，在script标签内引⽤如下⽅法即可。
需要注意的是显⽰字数的标签需要⾃⾏定位，当然，下⽂的⽰例中也可以看到。
<script>
//依次传⼊要计算的textarea的id，要输出字数统计的标签的id，和字数限制数
startMonitor('content','aaa',300);
</script>
引⽤的js
/*
*******************************************************************
重要，因为设置maxLength的缘故，textarea⾃带属性的计算⽅式为⽆论中英⽂都计算为⼀个字符，
和本⽂有出⼊，如果希望同步需要只需要切换最下⽅向标签内写值的⽅法即可（已提供）
*******************************************************************
*/
//传⼊参数依次为textarea的id和需要输出字数的span的id
function startMonitor(id, outId,max){
/
/给textarea附加最⼤字数限制
$('#'+ id +'').attr('maxLength',max);
var EventUtil=function(){};
EventUtil.addEventHandler=function(obj, EventType, Handler){
//如果是FF
if(obj.addEventListener){
obj.addEventListener(EventType, Handler,false);
}
//如果是IE
else if(obj.attachEvent){
obj.attachEvent('on'+ EventType, Handler);
}else{
obj['on'+ EventType]= Handler;
}
}
if($("#"+ id +"")){
var target = ElementById(id);
EventUtil.addEventHandler(target,'propertychange', CountChineseCharacters);
EventUtil.addEventHandler(target,'input', CountChineseCharacters);
//EventUtil.addEventHandler($('chaptercontent'),'keydown',CountChineseCharacters('chaptercontent')); }
function CountChineseCharacters(){
Words =$('#'+ id +'').val();
var W=new Object();
var Result =new Array();
var iNumwords =0;
var sNumwords =0;
var sTotal =0;//双字节字符;
var iTotal =0;//中⽂字符；
var eTotal =0;//Ｅ⽂字符
var otherTotal =0;
var bTotal =0;
var inum =0;
for(i =0; i < Words.length; i++){
var c = Words.charAt(i);
if(c.match(/[\u4e00-\u9fa5]/)){
if(isNaN(W[c])){
iNumwords++;
W[c]=1;
}
iTotal++;
}
}
for(i =0; i < Words.length; i++){
var c = Words.charAt(i);
if(c.match(/[^\x00-\xff]/)){
if(isNaN(W[c])){
sNumwords++;
}
sTotal++;
}else{
eTotal++;
}
if(c.match(/[0-9]/)){
inum++;
inum++;
}
}
//新浪计算⽅式
//$('#' + outId + '').il(sTotal + eTotal / 2)+"/"+max);
//⽆论英⽂汉⼦都算⼀个字符⽅式
$('#'+ outId +'').html((sTotal + eTotal)+"/"+max);
}
}
html页⾯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#textarea_box{
position: relative;
display: inline-block;
}
#text_count_p{
position: absolute;
margin: 0;
bottom: 10px;
right: 20px;
}
</style>
<body>
<h3 class="alert alert-success">快速计算字数和字符数的⼩⼯具（和新浪微博相同计算规则）</h3> <h3 class="alert alert-success">1.中⽂、中⽂标点算1个字符</h3>
<h3 class="alert alert-success">2.英⽂、英⽂标点、数字、符号算0.5个字符</h3>
textarea中cols表示
<h3 class="alert alert-success">3.未满1的向上取整</h3>
<div>
<div id="textarea_box">
<textarea id="content"name="content"class="toolarea"cols="70px"rows="10">
快速计算字数和字符数的⼩⼯具（和新浪微博相同计算规则）
1.中⽂、中⽂标点算1个字符
2.英⽂、英⽂标点、数字、符号算0.5个字符
3.未满1的向上取整</textarea>
<p id="text_count_p"><span id="aaa"></span></p>
</div>
</div>
<script src="cdn.bootcss/jquery/3.3.1/jquery.min.js"></script>
<script src="statistical_word_number.js"></script>
<script>
//依次传⼊要计算的textarea的id，要输出字数统计的span的id，和字数限制数
startMonitor('content','aaa',300);
</script>
</body>
</html>