JQ实现maxlength功能，中英文都按字符计算

时间：2022-02-21 16:01:57

  textarea标签有个maxlength属性，可以规定文本区域允许的最大字符数。例如当maxlength=50时，你只可以输入50个英文“字符”或者50个“中文字”（即100个字符）。例如：果你输入的内容既有中文又有英文时，这个长度就不是50个英文字符，也不是50个中文字，而是英文字母和中文字都只算一个字符。即你可以输入25个字母和25个中文字。

  那我想让用户只能输入50个字符，不管他输入的是中文还是英文，我全都转换成字符计算，该怎么办？于是有了下面的代码：

<html>
<head>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>
<body align="center">
    <div class="panelPop" id="bodyPop" style="display: block;">
        <div class="pannelTitle"></div>
        <div class="pannelBody">
          <span class="poperror"><br><br></span>
          <div class="pannelText">
          <textarea maxlength="50" class="textareaStyle" id="txtId" placeholder="建议" style="height: 300px;width: 300px;"></textarea>
            <div class="msLine"><span class="fontNumble">最多输入450字</span></div>
          </div>
          <dl>
            <dt>Email</dt>
            <dd><input id="emInput" type="text" placeholder="请填写真实邮箱"></dd>
          </dl>
          <dl>
            <dt id="contPerson">联系人</dt>
            <dd><input id="naInput" type="text" placeholder="姓名或称谓"></dd>
          </dl>
          <dl>
            <dt id="phNumber">电话</dt>
            <dd><input id="phInput" type="text" placeholder="联系电话"></dd>
          </dl>
          <div class="btnBox">
            <a class="btn" href="javascript:void(0)" id="popSubmit" onclick="popSuggest()">提交</a>
          </div>
        </div>
     </div>

<script type="text/javascript">
var maxCount = 450;
var lang == "CN";
$(document).ready(function () {
  //绑定统计字符函数
    $("#txtId").on('keyup', function () {
        var len = getStrLength(this.value);
        if (len > maxCount) {
            this.value = cut_str(this.value,len,maxCount);
            len = getStrLength(this.value);
        } 
        $(".fontNumble").html("当前输入 " + len + "/450字");
    });
});
// 中文字符判断
function getStrLength(str) {
    var len = str.length;
    var reLen = 0;
    for (var i = 0; i < len; i++) {
        if (str.charCodeAt(i) < 27 || str.charCodeAt(i) > 126) {
            // 全角    
            reLen += 2;
        } else {
            reLen++;
        }
    }
    return reLen;
}
// 截取字符（中英文）
function cut_str(stbr,strLen,maxLen) {
    var reLen = 0;
    var a = 0;
    for (var i = 0; i < strLen; i++) {
        if (stbr.charCodeAt(i) < 27 || stbr.charCodeAt(i) > 126 || stbr.charCodeAt(i)>255) {
           // 全角和非英文  
           reLen += 2;
        } else {
            reLen++;
        }
        if (reLen >= maxLen) {
            a = i-(reLen-maxLen) + 1;
            break;
        }
     }
     return stbr.substring(0, a);
}   
function popSuggest(){
    //联系电话验证
    var phone = 1;
    if ($("#phInput").val().length <= 0) {
        var cntnull = '<span class="poperror">联系电话不能为空。<br/><br/></span>';
        $(".pannelText").before(cntnull);      
        phone = 0;
        return;
    } else {
        var isMobile = $("#phInput").val().match(/^[0-9 -]+$/);
        //var isAllbars = $("#phInput").val().match(/^[-]+$/);
        var isAllbars = $("#phInput").val().match(/^[1-9][0-9]*/);
        if (!isMobile || isAllbars) {
            var cntnull = '<span class="poperror">请输入正确的联系电话。<br/><br/></span>';
            $(".pannelText").before(cntnull);
            phone = 0;
            return;
        }
    }
    alert(phone);
}
</script>
</body></html>
标签：

相关文章