textarea限制每行只可輸入固定的字符，這個(gè)需求在H5移動(dòng)端真的很mmp，這個(gè)需求懟了我不少時(shí)間，曾經(jīng)為它通宵過(guò)，此處省略一萬(wàn)字。。。

簡(jiǎn)(變)單(態(tài))的需求：

有兩種textarea,一種是一行只能輸入35個(gè)字符，一個(gè)是一行只能輸入50個(gè)字符；（看起來(lái)很簡(jiǎn)單的樣子）

需要考慮的問(wèn)題：

1.一行怎么控制字?jǐn)?shù)；
2.每個(gè)字母的寬度不一樣，比如”W”和”I”，數(shù)字的寬度也不一樣，比如”1”和”8”（可能第一行全部是”W”，第二行全部是”I”,這樣就算字符個(gè)數(shù)相同長(zhǎng)度不同看起來(lái)也很奇怪，就像下面的這張圖，12個(gè)”i”和4個(gè)”w”差不多寬）;

3.不同移動(dòng)設(shè)備下字體的大小在變化(項(xiàng)目中單位都是以rem為標(biāo)準(zhǔn))；
4.需要兼容網(wǎng)頁(yè)端和APP(最終會(huì)嵌入在APP中)

針對(duì)上面的問(wèn)題，最終思路如下：

1、設(shè)定textarea字體為等寬字體，等寬字體是指這種字體下”W”和”I”是等寬的，這類(lèi)字體有Courier New,Arial,Helvetica,Sans-serif等；
2、我們用js控制textarea的寬度為剛好35個(gè)字符的寬度；
3、為了解決不同瀏覽器、APP對(duì)單位解析的精度不一樣，我們?cè)O(shè)置的寬度大小需要稍微大一點(diǎn)點(diǎn)，不然的話可能一行能容納36個(gè)字符，也可能會(huì)只能容納34個(gè)字符(這是個(gè)大坑，這是精度問(wèn)題)。

相關(guān)代碼：

function setTextareaWidth(){//將rem單位轉(zhuǎn)化為px 字體默認(rèn)是0.3remvar a = 0.3*parseFloat(document.documentElement.style.fontSize);//設(shè)置字體$("textarea").css("font-size",a+"px");//計(jì)算35個(gè)字符的長(zhǎng)度var str = "";for(var i=0;i<35;i++){str += "w";}var width = textSize(a+"px","Arial",str);//計(jì)算4/5個(gè)字符的寬度 作為兼容誤差var offset = textSize(a+"px","Arial","w").width * 4 / 5;//設(shè)置textarea寬度$("textarea").css("width",width+offset+"px"); }

說(shuō)明：這里textarea字體設(shè)置為0.3rem，和頁(yè)面字體大小一樣，設(shè)置rem單位適配不同屏幕；計(jì)算字符串的顯示寬度參考上一篇博客Js獲取字符串的顯示寬度/高度 如有問(wèn)題，歡迎留言。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。