<div class="form-group">
<label class="col-sm-2 control-label">适用说明</label>
<div class="col-sm-10" id="wordCount">
<textarea class="form-control" rows="3" name="info" id="description" maxlength="200"></textarea>
<span class="wordwrap">还可输入<var class="word">200</var>字/共200字</span>
</div>
</div>
<script>
$(function() {
//先选出 textarea 和 统计字数 dom 节点
var wordCount = $("#wordCount"),
textArea = wordCount.find("textarea"),
word = wordCount.find(".word");
//调用
if (wordCount.length) {
statInputNum(textArea, word);
}
});
/*
* 剩余字数统计
* 注意 最大字数只需要在放数字的节点哪里直接写好即可 如:<var class="word">200</var>
*/
function statInputNum(textArea, numItem) {
var max = numItem.text(),
curLength;
textArea[0].setAttribute("maxlength", max);
textArea.val().match(/\n/gi);
curLength = textArea.val().length;
var len = max - curLength;
//这里是用来回显示的
numItem.text(len);
//监听改变事件
textArea.on('input propertychange', function() {
var _value = $(this).val().replace(/\\n\\r/gi, " ");
if (max - _value.length < 0) {
numItem.text(0);
$("#description").val($("#description").val().substring(0, max));
} else {
numItem.text(max - _value.length);
}
});
}
</script>
项目需要增加一个文本域字数限制及验证,从网上搜索了好多,都是回显有问题或者因为回车空格导致的计算不准确,经过多次测试,确定以上方案。
另外有过程中有几个问题需要注意一下。
1、后端程序与前端程序统计字数的不一致,例如:前端是一个字算符一个字,PHP在utf8的情况下一个中文字是按3个字符的。
2、mysql在5.0以上的版本在编码是utf8的情况下,也是一个字符代表一个字,例如:varchar(200),只可以输入200个字符,这一点也要考虑进去。
技术实力有限,如果错误请指正。