textarea输入框限制字数(JavaScript)

2018-08-02  本文已影响0人  莫小归

需求:Web前端文本框(textarea)限制字数并显示当前输入字数

方法:1.利用web文本框自带maxlength属性。
2.实时显示字数的textarea文本框。

代码:

  1. 利用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>

大漠孤烟直,长河落日圆

上一篇下一篇

猜你喜欢

热点阅读