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;
            }
            
          }
        }

 

 

 

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

js输入框字符宽度判断-已知字符串宽度/未知字符串宽度》有1个想法

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据