输入框字节长度限制

m_2507

已于 2023-09-20 14:31:51 修改

阅读量1.2k

点赞数 3

文章标签： vue.js elementui javascript html5

于 2023-09-20 14:29:31 首次发布

本文链接：https://blog.csdn.net/m_2507/article/details/133078803

版权

以可以输入10字节数为例，输入框可能包含以下几种情况：

1.5个中文字符；

2.10个英文字符；

3.2个中文字符，6个英文字符等中英文混合的情况。

<el-form-item label="姓名">
    <el-input placeholder="请输入姓名" v-model.trim="contactForm.name" :maxlength="10" @input="initName"></el-input>
</el-form-item>

限制输入10字节长度，如果中文字数为n，则超出需要截取的长度则为10-n

    initName() {
      let inputName = this.contactForm.name
      let bytes = 0;
      let ChineseCount = 0; //中文字数
      for (let i = 0; i < inputName.length; i++) {
        let char = inputName.charCodeAt(i);
        // 大于255为中文，中文字符2字节；小于255为数字/英文等1字节
        if (char < 255) {
          bytes += 1;
        } else {
          bytes += 2;
          ChineseCount += 1; // 统计中文字数
        }
      }
      if (bytes > 10) {
        // 超出截取
        this.contactForm.name = inputName.slice(0, 10 - ChineseCount);
      }
    },