js 限制输入框的字节数，中文两个字节，英文字母一个字节

最新推荐文章于 2023-10-10 18:02:23 发布

原创最新推荐文章于 2023-10-10 18:02:23 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的对输入框内中文和字母进行16字节长度限制的方法，通过特殊字符替换及字节计算确保输入符合要求。

也许在网上有很多类似的文章，但是这里大家应该知道，js里面，中文和字母的长度都是1，但是数据库不知道呀，数据库很多都是按照字节来的，所以，控制输入框的字节数看来比长度限制更为重要。

提出问题：

1、限制文本框为16个字节，只能输入中文和字母

解决思路：

1、判断只能是中文和英文

2、判断长度只能为16

3、有一个不符合，将进入循环：

第一步：替换掉所有的#，因为我后面要用到这个特殊字符

第二步：将所有的中文替换为：@@

第三步：截取0-20的字节长度，这里中文已经转成两个长度了

第四步：将所有的@@转换成#

第五步：替换掉最后可能出现的中文的半个字节，一个@

第六步：获取最后剩的字符长度，也就是要截取的字符串的长度

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>

<input type="text" id="input"/>


<script>

    $('#input').on('keyup keydown', function () {
        var $this = $(this);
        var str = $this.val();
        var limitLen = 16;
        var sign = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g;

        var flag = /^[\u4e00-\u9fa5a-zA-Z]+$/.test(str) && str.replace(/[\u4e00-\u9fa5]/g, '@@').length <= limitLen ? true : false;
        if (!flag) {

            var convertStr = str.replace(sign,'').replace(/#/g,'').replace(/[\u4e00-\u9fa5]/g, '@@').substr(0, limitLen);

            var len = convertStr.replace(/@@/g, '#').replace('@', '').length;

            var val = str.substring(0, len);
            $this.val(val);
        }
    });

</script>
</body>
</html>