900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 关于文本框字数的限制以及动态显示剩余字数

关于文本框字数的限制以及动态显示剩余字数

时间:2023-11-23 19:36:17

相关推荐

关于文本框字数的限制以及动态显示剩余字数

一、首先先看一个非常普遍的效果截图,根据需求写代码

<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.剩下的方法可自行查询

......

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。