您的位置:首页 > 运维架构

textarea文本框实现字数监控--propertychange input

2016-11-17 18:06 369 查看
1、页面文本框:

<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);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: