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.3remvar 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獲取字符串的顯示寬度/高度 如有問題，歡迎留言。

總結

以上是生活随笔為你收集整理的textarea限制每行可输入固定个数的字符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。