今天有个项目,需要统计输入框text的字数,用于限制用户的输入,就自己尝试手动写了下。 大家可以看看下面的代码
这个是html代码:
<div class="form-group kb-input-content"> <textarea name="content" id="comment_content" placeholder="你的经验很有价值,将会成为他人的参考~" ></textarea> <div id="kb-input-tip"> <span class="input-number-tip">15~500个字</span> </div> </div>
最后下面的是js代码,记得导入jquery 插件
// 中文字符判断(计算字符数)
function getStrLength(str) {
var len = str.length;
var reLen = 0;
for (var i = 0; i < len; i++) {
if (str.charCodeAt(i) >= 0 || str.charCodeAt(i) <= 128) {
// 全角
reLen += 1;
} else {
reLen+=2;
}
}
return reLen;
}
//计算字符数(200个字内,用于回复框)
function count_str(value,total_count){
var len = getStrLength(value),
count = "";
count = total_count-len;
if(count < 0 ){
count = -count;
return '已经超过<span class="red">'+count+'</span>字';
}else{
if(len<15){
count = 15-len;
return '最少15字,还需要输入<span>'+count+'</span>字';
}else{
count = total_count-len;
return '还可以输入<span>'+count+'</span>字';
}
}
}
/* 文本区域字数检测 */
$("#comment_content").on("keyup mouseup",function(event){
var count_html=count_str($(this).val(),500);
$(".kb-input-content").find(".input-number-tip").html(count_html);
var content=$(this).val();
var content_len=getStrLength(content);
if(content_len<15){
$(".kb-input-content") .find(".input-number-tip").addClass("warm");
}else{
$(".kb-input-content") .find(".input-number-tip").removeClass("warm");
}
});