textarea字数验证支持

<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个字符,这一点也要考虑进去。

技术实力有限,如果错误请指正。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值