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

来源：互联网发布：数据智能编辑：程序博客网时间：2024/05/22 06:06

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>

0 0