textarea文本框实现字数监控--propertychange input
2016-11-17 18:06
369 查看
1、页面文本框:
2、判断是否有汉字和特殊符号:
4、如果要求换行占两个字符:
<textarea rows="3" cols="20" name="packagingDesc" id="packagingDesc" style="border: 1px solid #dbdbdb;width: 520px;vertical-align: text-top;">${logInfo.packagingDesc }</textarea> <p class="qi">剩余:<span id="text-count" style="color: #F60;">512</span>字符,建议填写包装形式、尺寸,各类集装箱能装载的产品件数等信息,便于买家了解。</p>
2、判断是否有汉字和特殊符号:
// 常规包装 $("#text-count").text(512-$("#packagingDesc").val().trim().length); $("#packagingDesc").blur(function(){ var packagingDesc = $(this).val().trim(); if(packagingDesc != ""){ var str = validateFun(packagingDesc); if(str != ""){ $("#packagingDesc_info").show(); $("#packagingDesc_error").text(str); }else{ $("#packagingDesc_info").hide(); $("#packagingDesc").css("border-color","#dcdcdc"); } }else{ $("#packagingDesc_info").hide(); } });
function validateFun(key){ var pattern_chin = /[\u4e00-\u9fa5]/g; //汉字的正则表达式 var patter_special_char = /[﹤﹥;,《》ØαβγδεπνξρσηθλτφψωΔΣ:。、¥()——【】:‘’“”?¤§゜¨·×÷ˇˉˊˋ˙ΓΔΘΞ∏∑ΥΦΨ℅№℡′〃※ъыюя―‖¨′〃£¥¤¢]+/; var str = ""; var matchResult = key.match(pattern_chin); var matchResultSpecial = key.match(patter_special_char); if(matchResult != null && matchResultSpecial != null){ str = "请不要输入如下非英文字符:"+matchResult.join("")+matchResultSpecial.join(""); }else if(matchResult != null && matchResultSpecial == null){ str = "请不要输入如下非英文字符:"+matchResult.join(""); }else if(matchResult == null && matchResultSpecial != null){ str = "请不要输入如下非英文字符:"+matchResultSpecial.join(""); } return str; }3、字数限制的监控方法:
/*字数限制*/ $("#packagingDesc").on("propertychange input", function() { var $this = $(this), _val = $this.val(), count = ""; if (_val.length > 512) { $this.val(_val.substring(0, 512)); } count = 512 - $this.val().length; $("#text-count").text(count); });
4、如果要求换行占两个字符:
/*字数限制*/ $("#packagingDesc").on("propertychange input", function() { var $this = $(this), _val = $this.val(), r=_val.match(/\s/gi), haveInput = _val.length; if(r!=null){ haveInput = haveInput + r.length; } if (haveInput > 512) { $this.val(_val.substring(0, 512)); } $("#text-count").text(512 - haveInput); });
相关文章推荐
- 在JavaScript中实现统计文本框Textarea字数
- 兼顾pc和移动端的textarea字数监控的实现方法
- JavaScript实现统计文本框Textarea字数增强用户体验
- 在JavaScript中实现统计文本框Textarea字数
- 兼顾pc和移动端的textarea字数监控的实现方法
- 用js实现在文本框中检测字数和限制字数功能
- JS控制文本框textarea输入字数限制
- html中利用javascript实现文本框字数的动态计算
- 用js实现在文本框中检测字数和限制字数功能
- Asp.net实时显示文本框字数实现代码
- html中利用javascript实现文本框字数的动态计算
- 实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)
- jquery实现文本框textarea的ctrl+enter提交表单
- 实现textarea限制输入字数
- 用div代替textarea,实现在文本框中使用回车<br>和设置字体功能
- 实现textarea限制输入字数
- jQuery插件InputLimitor实现文本框输入限制字数统计
- jQuery插件InputLimitor实现文本框输入限制字数统计
- JS控制文本框textarea输入字数限制的方法