关于文本框字数的限制以为动态显示剩余字数
Posted 再见小猴子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于文本框字数的限制以为动态显示剩余字数相关的知识,希望对你有一定的参考价值。
一、首先先看一个非常普遍的效果截图,根据需求写代码
<div style="padding-bottom: 100px"> <textarea style="width:230px;height:160px;" id="textArea" cols="30" rows="10">dancer测试!</textarea> <span><span id="textNum">0</span>/100</span> <!-- 最多100字符,0处显示的是已经写了多少字符 --> </div> <script> $(\'#textArea\').on("keyup",function(){ $(\'#textNum\').text($(\'#textArea\').val().length);//这句是在键盘按下时,实时的显示字数 if($(\'#textArea\').val().length > 100){ $(\'#textNum\').text(100);//长度大于100时0处显示的也只是100 $(\'#textArea\').val($(\'#textArea\').val().substring(0,100));//长度大于100时截取钱100个字符 } }) $(\'#textNum\').text($(\'#textArea\').val().length);//这句是在刷新的时候仍然显示字数 </script>
二、咱们再来讨论文本框限制字数的几种方法
1.只用css来限制
<textarea name="anchorAnnounce" cols="47" rows="2" maxlength="20" onchange="this.value=this.value.substring(0, 20)" onkeydown="this.value=this.value.substring(0, 20)" onkeyup="this.value=this.value.substring(0, 20)" placeholder="喜欢我就关注我">喜欢我就关注我</textarea>
2.剩下的方法可自行查询
......
以上是关于关于文本框字数的限制以为动态显示剩余字数的主要内容,如果未能解决你的问题,请参考以下文章