本文已参与「新人创作礼」活动，一起开启掘金创作之路。

平时无论在移动端还是PC端都会经常用到文本框,最常碰到的就是要对文本框里面的字数进行限制还有相对应的把剩余可输入的字数显示在右下角.要实现它并不是很难,直接上代码套用一下就ok了.

HTML:

因为我这里只用到了一小块地方,所以就直接把文本框CSS代码写在里面了,如果你有多个地方用同样的效果建议你另外在上面写把样式封装成类什么的后面用起来方便些.其中在textarea里面限制长度的重点代码为下面的maxlength具体限制多少自己可以更改

<textarea placeholder="填写额外对商家和骑手小哥的备注信息" maxlength="50" style="color: #b3b3b3;border-radius: 0;border: none;height: 135px;background-color: #F8F8F8;" onkeyup="setLength(this,50,'wordsLength');"></textarea>

JS:

具体的解释我都在代码里有注释了,很简单一看就能明白

// 限制文本框字数 function setLength(obj,maxlength,id){ var num=maxlength-obj.value.length;//获取文本框输入内容的长度 var leng=id;//获取右下角显示的id if(num<0){ num=0;//如果文本框文字小于零则让它显示为零 } document.getElementById(leng).innerHTML=num+"/50"; //通过id获取到span标签在页面上的显示并对它的值进行拼接,就是把计算出来的结果+最大限制字数 }