美文网首页
textarea输入框限制字数(JavaScript)

textarea输入框限制字数(JavaScript)

作者: 莫小归 | 来源:发表于2018-08-02 10:05 被阅读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>
    

    大漠孤烟直,长河落日圆

    相关文章

      网友评论

          本文标题:textarea输入框限制字数(JavaScript)

          本文链接:https://www.haomeiwen.com/subject/fdkjvftx.html