【Vue】实现显示输入框字符长度

最新推荐文章于 2025-02-15 22:58:33 发布

重生之搬砖忍者

最新推荐文章于 2025-02-15 22:58:33 发布

阅读量697

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_54847700/article/details/137828666

版权

文章讲述了如何使用JavaScript计算用户请求参数中提示字符串的字节长度，根据不同Unicode编码范围确定所需字节数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div style="float: right; margin-right: 10px">
      <el-popover placement="top-start" width="200" trigger="hover" :content="'当前输入的内容字节长度为：' +
        this.byteLength +
        '，剩余可输入的字节长度和最大文本长度设置的最大值为：' +
        (4096 - this.byteLength)
        ">
        <el-button slot="reference" type="text" class="el-icon-info"></el-button>
      </el-popover>
      <span style="line-height: 50px; font-size: 10px"> 字节长度： </span>

      <span style="line-height: 50px; font-size: 12px; color: #aaa">{{
        this.byteLength
      }}</span>
    </div>

computed: {
    byteLength() {
      var str = this.requestParams.prompt;
      if (str == null || str === undefined) return 0;
      if (typeof str != "string") {
        return 0;
      }
      var total = 0,
        charCode,
        i,
        len;
      for (i = 0, len = str.length; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode <= 0x007f) {
          total += 1; //字符代码在000000 – 00007F之间的，用一个字节编码
        } else if (charCode <= 0x07ff) {
          total += 2; //000080 – 0007FF之间的字符用两个字节
        } else if (charCode <= 0xffff) {
          total += 3; //000800 – 00D7FF 和 00E000 – 00FFFF之间的用三个字节，注: Unicode在范围 D800-DFFF 中不存在任何字符
        } else {
          total += 4; //010000 – 10FFFF之间的用4个字节
        }
      }
      return total;
    },
  },