js 校验输入框还可以输入多少个字

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){
    function Number(){
        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);
    }
    $(txt).on("keyup", Number);

    //页面初始化  判断是否需要调用该函数
    if(typeof $(txt).val() !== 'undefined'){
        Number();
    }
}

//调用residualFigure函数
residualFigure(".textarea",".num",100);

效果图1 效果图2