textarea输入框限制字数(JavaScript)
2018-08-02 本文已影响0人
莫小归
需求:Web前端文本框(textarea)限制字数并显示当前输入字数
方法:1.利用web文本框自带maxlength属性。
2.实时显示字数的textarea文本框。
代码:
- 利用textarea中的maxlength属性
<textarea id="taContent" row="3" 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)> </textarea>
注意:onchange、onkeydown、onkeyup三者缺一不可。
2.通过JavaScript限制字数并实时显示
html:
<div>
<textarea id="textArea" cols="30" rows="10">测试</textarea>
<span><span id="textNum">0</span>/100</span>
//最多100字符,0处显示的是已经写了多少字符
</div>
JavaScript:
<script type="javascript/text">
$('#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>
大漠孤烟直,长河落日圆