js输入框字符宽度判断-已知字符串宽度/未知字符串宽度

参考文章
一、需求说明
一串字符长度很好判断，this.text.length就拿到了，但是对于一个固定宽度的文本框，要求不能超过宽度，那么就要计算这行文本的宽度。汉字是等宽字符，但是数字和英文则宽度不一致，这里的建议是，以数字为单位，比如1，那么一行最多输入20的汉子，长度则为20，字母则要按照最宽的字符w去计算，数字则以5为单位去计算。

二、解决方案
情形一：已知的字符串宽度，根据要求截取固定宽度的字符串，比如我已经知道了一串字符串了，去截取固定的宽度
方法一：

String.prototype.visualLength = function(size,family)
　　　　　　{
　　　　var ruler = $("#ruler").css({
　　　　“font-size”:size || “inherit”,
　　“font-family”:family || “inherit”
　　　　 });
　　ruler.text(this);
　　return ruler.width();
　　　　　 }

方法二：

var canvas = document.createElement(‘canvas’)//首先创建一个canvas标签
var ctx = canvas.getContext(“2d”) as CanvasRenderingContext2D;//把canvas的画笔给调出来
ctx.font=“26px 思源黑体”;//设置字体大小和字体，这一步很重要，直接影响了测量结果，因为14px和16px的字体的宽度是不一样的
var width = ctx.measureText(this.name).width;//开始测量字体的宽度
情形二：未知字符串的宽度，根据动态输入的字符判断当前的宽度，根据输入框宽度截取能显示的最多字符长度，比如一个输入框固定了长度，每输入一个字符后则判断是否超过，超过后就截去超过的部分
按照比例，汉字宽度为1，则英文为0.89，数字为0.57，符号（比如=？）

    @Watch('backText')
    sendText(){
      let count=0;
      let maxLen:any
      for (let index = 0; index < this.backText.length; index++) {
        let value=this.backText[index];
        if (value.match(/[A-Z]/g) || value.match(/[\u4e00-\u9fa5]/g)) {//大写英文/中文
          count+=1;
        }else if (value.match(/[a-z]/g)) {//小写英文
          count+=0.62;
        }else if (value.match(/[0-9]/g)||value.match(/[%&',;=?~$\x22]/g)) {//数字/符号
          count+=0.54;
        }else if (value.match(/[(^\s*)|(\s*$)]/g)) {//空格
          count+=0.2;
        }
        if (count>19) {
          maxLen=index;
          this.backText=this.backText.substring(0,index);
          alert(`亲,内容已输满了哦~`;  
          return;
        }
        
      }
    }

欢迎转载，转载需带着文章出处链接~~