實時顯示字數的textarea文字框
阿新 • • 發佈：2019-02-19
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery-2.1.1.min.js"></script>
.one{
width:230px;height:160px;position:relative;}
.two{
bottom:3px;right:0px;position:absolute;
}
#textArea{
width:100%;
height:100%;
}
</head>
<body>
<!-- 在處理textarea之前，首先需知道textarea是不會顯示value值的，
如果想顯示需要使用js中的方法 $('#textArea').val('123'); -->
<div class="one">
<textarea id="textArea" cols="30" rows="10">測試</textarea>
<span class='two'><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>
</body>
</html>
如果要使用移動端裝置(不產生縮放)需在head中加入：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
注意：
以上不管是使用onkeydown/onkeypress/onkeyup哪種其實都是不完美的，最顯而易見的缺陷就是在處理複製、貼上的內容時是無效的，還有在移動端也有可能會有問題
這時可以使用onpropertychange，它可以實現實時監聽的效果，但是這個事件是IE專屬的，這時最好判斷是否為IE瀏覽器，是就是用onpropertychange，不是就使用另一個 oninput，最好不要使用onchange，因為onchange是在失焦的時候才出發，不能實時監控，onkeydown在鍵盤按下時觸發，也會發生錯亂(比如你寫 智慧
兩個漢字 它有可能顯示的是拼音的長度6)，如果是簡單的使用最好是onkeyup，更完美的就是onpropertychange結合oninput