html程式碼:
<textarea class="textarea" maxlength="100" placeholder=" 最多輸入100個字!"></textarea>
<div>輸入剩餘<span class="num">100</span>字。</div>
複製程式碼
js程式碼:
//residualFigure函式校驗輸入框還可以輸入多少字
//txt為要限制輸入內容的容器,residue為顯示剩餘數字的容器,max為最大輸入數字限制
function residualFigure(txt, residue, max){
$(txt).on("keyup",function(){
var content = $(txt).val().replace(/\s/g,''),//獲取輸入內容容器中的值
len = content.length,//獲取輸入容器中值的長度
residual_number = max - len;//最大輸入限制的數值-獲取輸入容器中值的長度,得到改變剩餘數字的值
if(residual_number < 0){
residual_number = 0;//防止剩餘數字的值出現負數情況
}
//判斷 若輸入框裡的內容長度大於給定限制的數值,則只保留給定限制的數值長度的內容
if(len > max){
$(txt).val(content.substring(0,max));
}
//更改剩餘數字數值
$(residue).text(residual_number);
});
}
複製程式碼
//呼叫residualFigure函式
residualFigure(".textarea",".num",100);
複製程式碼