今天有个项目,需要统计输入框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"); } });