關於文本框字數的限制以及動態顯示剩余字數

 一、首先先看一個非常普遍的效果截圖，根據需求寫代碼

 

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

　　......