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

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

textarea字数验证支持相关推荐

身份证号码验证-支持新的带x身份证
//--身份证号码验证-支持新的带x身份证 function isIdCardNo(num) { var factorArr = new Array(7,9,10,5,8,4,2,1,6,3 ...
身份证校验（//身份证号合法性验证 //支持15位和18位身份证号//支持地址编码、出生日期、校验位验证）
window.checkIdNumber=(function () {var vcity = {11: "北京", 12: "天津", 13: "河北 ...
html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...
微信小程序-textarea字数统计与限制
第一步:参考官方文档<textarea小程序> textarea多行输入框.该组件是原生组件,使用时请注意相关限制. 用到的属性: 属性说明 maxlength 最大输入长度,设置为 - ...
golang表单及验证支持
在Web开发中对于这样的一个流程可能很眼熟: 打开一个网页显示出表单. 用户填写并提交了表单. 如果用户提交了一些无效的信息,或者可能漏掉了一个必填项,表单将会连同用户的数据和错误问题的描述信息返回. ...
兼顾pc和移动端的textarea字数监控的实现方法
概述 pc端移动端中文本框监控字数的功能的一种较为简单的实现,考虑到安卓和IOS输入法输入过程中是否触发keyup的差异.利用监听compositionstart判断是否开启了输入法.从而实现体验较为 ...
微信小程序~textarea字数限制与计算
先看效果图,是不是自己想要的 1.在textarea中绑定bindinput事件. 2.通过var value = e.detail.value;获取textarea的值. 3.通过 var len ...
vue实时显示textarea字数_Vue 实时显示输入的字数
最近做项目需要查看用户输入的字数的长度,之前原生写过一个: {{remnant}}/240 export default { data() { return { userinput: '' // 客户 ...
显示html标签的textarea字数,JavaScript中统计Textarea字数并提示还能输入的字符
现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体 ...

textarea字数验证支持

textarea字数验证支持相关推荐

最新文章

热门文章