文字框限制輸入字數的JS

小虎哥-技術部落格發表於2018-04-02
JS
HTML程式碼：
其中：class="ui-text" 、class="ui-input"、data-num="48"、class="ui-textTips"，是必不可少的。
 <div class="div-p ui-text">
     <ul><li></li><li></li><li></li></ul>
     <textarea name="zhufuyu" id="zhufuyu" cols="" rows="" placeholder="" maxlength="48" class="ui-input" data-num="48"></textarea>
    <div style="margin-top: 5px;" class="zhufuyu_text_msg ui-textTips">還可以輸入<em>48</em>個字</div>
 </div>
JS程式碼：
function tipsText(){
    $('.ui-text').each(function(){
        var _this = $(this);
        var elm = _this.find('.ui-input');
        var txtElm = _this.find('.ui-textTips');
        var maxNum = _this.find('.ui-input').attr('data-num') || 500;
        console.log($.support.leadingWhitespace);
        if(!$.support.leadingWhitespace){
            _this.find('textarea').on('propertychange',function(){
                changeNum(elm,txtElm,maxNum);
            });
            _this.find('input').on('propertychange',function(){
                changeNum(elm,txtElm,maxNum);
            });
        } else {
            _this.on('input',function(){
                changeNum(elm,txtElm,maxNum);
            });
        }
    });
}

tipsText();

//獲取文字輸出字數，可以遍歷使用
//txtElm動態改變的dom，maxNum獲取data-num值預設為120個字，ps數字為最大字數*2
function changeNum(elm,txtElm,maxNum) {
    //漢字的個數
    //var str = (elm.val().replace(/\w/g, "")).length;
    //非漢字的個數
    //var abcnum = elm.val().length - str;
    total = elm.val().length;
    if(total <= maxNum ){
        texts = maxNum - total;
        txtElm.html('還可以輸入<em>'+texts+'</em>個字');
    }else{
        texts = total - maxNum ;
        txtElm.html('已超出<em class="error">'+texts+'</em>個字');
    }
    return ;
}


相關文章