心系少時言 等一不歸人

html代碼：
<textarea class="textarea" maxlength="100" placeholder=" 最多輸入100個字！"></textarea>
<div>輸入剩余<span class="num">100</span>字。</div>

js代碼：
//residualFigure函數(shù)校驗輸入框還可以輸入多少字
//txt為要限制輸入內(nèi)容的容器，residue為顯示剩余數(shù)字的容器，max為最大輸入數(shù)字限制
function residualFigure(txt, residue, max){
    function Number(){
        var content = $(txt).val().replace(/\s/g,''),//獲取輸入內(nèi)容容器中的值
            len = content.length,//獲取輸入容器中值的長度
            residual_number = max - len;//最大輸入限制的數(shù)值-獲取輸入容器中值的長度，得到改變剩余數(shù)字的值
        if(residual_number < 0){
            residual_number = 0;//防止剩余數(shù)字的值出現(xiàn)負數(shù)情況
        }
        //判斷 若輸入框里的內(nèi)容長度大于給定限制的數(shù)值，則只保留給定限制的數(shù)值長度的內(nèi)容
        if(len > max){
            $(txt).val(content.substring(0,max));
        }
        //更改剩余數(shù)字數(shù)值
        $(residue).text(residual_number);
    }
    $(txt).on("keyup", Number);

    //頁面初始化  判斷是否需要調(diào)用該函數(shù)
    if(typeof $(txt).val() !== 'undefined'){
        Number();
    }
}

//調(diào)用residualFigure函數(shù)
residualFigure(".textarea",".num",100);

效果圖1

效果圖2