js 校驗輸入框還可以輸入多少個字

風暴阿呆發表於2017-12-14
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);
複製程式碼

js 校驗輸入框還可以輸入多少個字

js 校驗輸入框還可以輸入多少個字


相關文章