最近找了一个通过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 = document.getElementById(id);
EventUtil.addEventHandler(target, 'propertychange', CountChineseCharacters);
EventUtil.addEventHandler(target, 'input', CountChineseCharacters);
//EventUtil.addEventHandler($('chaptercontent'),'keydown',CountChineseCharacters('chaptercontent'));
}
window.onload = CountChineseCharacters();
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; //E文字符
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++;
}
}
//新浪计算方式
//$('#' + outId + '').text(Math.ceil(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>
<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 style="color:red" id="aaa"></span></p>
</div>
</div>
<script src="https://cdn.bootcss.com/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>