textarea限制每行可输入固定个数的字符

textarea限制每行只可输入固定的字符，这个需求在H5移动端真的很mmp，这个需求怼了我不少时间，曾经为它通宵过，此处省略一万字。。。

简(变)单(态)的需求：

有两种textarea,一种是一行只能输入35个字符，一个是一行只能输入50个字符；（看起来很简单的样子）

需要考虑的问题：

1.一行怎么控制字数；
2.每个字母的宽度不一样，比如”W”和”I”，数字的宽度也不一样，比如”1”和”8”（可能第一行全部是”W”，第二行全部是”I”,这样就算字符个数相同长度不同看起来也很奇怪，就像下面的这张图，12个”i”和4个”w”差不多宽）;
这里写图片描述
3.不同移动设备下字体的大小在变化(项目中单位都是以rem为标准)；
4.需要兼容网页端和APP(最终会嵌入在APP中)

针对上面的问题，最终思路如下：

1、设定textarea字体为等宽字体，等宽字体是指这种字体下”W”和”I”是等宽的，这类字体有Courier New,Arial,Helvetica,Sans-serif等；
2、我们用js控制textarea的宽度为刚好35个字符的宽度；
3、为了解决不同浏览器、APP对单位解析的精度不一样，我们设置的宽度大小需要稍微大一点点，不然的话可能一行能容纳36个字符，也可能会只能容纳34个字符(这是个大坑，这是精度问题)。

相关代码：

function setTextareaWidth(){
  //将rem单位转化为px  字体默认是0.3rem
  var a = 0.3*parseFloat(document.documentElement.style.fontSize);
  //设置字体
  $("textarea").css("font-size",a+"px");
  //计算35个字符的长度
  var str = "";
  for(var i=0;i<35;i++){
    str += "w";
  }
  var width = textSize(a+"px","Arial",str);
  //计算4/5个字符的宽度  作为兼容误差
  var offset = textSize(a+"px","Arial","w").width * 4 / 5;
  //设置textarea宽度
  $("textarea").css("width",width+offset+"px");
}

说明：这里textarea字体设置为0.3rem，和页面字体大小一样，设置rem单位适配不同屏幕；计算字符串的显示宽度参考上一篇博客Js获取字符串的显示宽度/高度如有问题，欢迎留言。