JavaScript 限制文本框輸入長度（支持字符限制）

2015/08/21 88813

清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>>

1.實時顯示可輸入的字數(shù)（字節(jié)數(shù)）

2.兩種限制方式（長度、字節(jié)數(shù)）

3.中文輸入法下可正常使用，無BUG

4.同一頁面可以使用多個，相互不干擾

limit.js代碼： 

function limit(){     
    var txtNote;//文本框     
    var txtLimit;//提示字數(shù)的input     
    var limitCount;//限制的字數(shù)     
    var isbyte;//是否使用字節(jié)長度限制（1漢字=2字符）     
    var txtlength;//到達限制時，字符串的長度     
    var txtByte;     
    this.init=function(){     
        txtNote=this.txtNote;     
        txtLimit=this.txtLimit;     
        limitCount=this.limitCount;     
        isbyte=this.isbyte;     
        txtNote.onkeydown=function(){wordsLimit()};txtNote.onkeyup=function(){wordsLimit()};     
        txtLimit.value=limitCount;           
    }        
    function wordsLimit(){     
        var noteCount=0;             
        if(isbyte){noteCount=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length}else{noteCount=txtNote.value.length}     
        if(noteCount>limitCount){     
            if(isbyte){     
                txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2));     
                txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;              
                txtLimit.value=limitCount-txtByte;     
            }else{     
                txtNote.value=txtNote.value.substring(0,limitCount);     
                txtLimit.value=0;     
            }        
        }else{     
            txtLimit.value=limitCount-noteCount;     
        }     
        txtlength=txtNote.value.length;//記錄每次輸入后的長度     
        txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;     
    }     
}    

<html>    
<body>    
<input id="txtNote" />    
還可輸入<input type="text"  id="txtCount"  />個字符     
</body>    
<mce:script src="limit.js" mce_src="limit.js"></mce:script>  
<mce:script type="text/javascript"><!--  

var lim=new limit();     
lim.txtNote=document.getElementById("txtNote");     
lim.txtLimit=document.getElementById("txtCount");     
lim.limitCount=20;     
lim.isbyte=true;     
lim.init();  
// --></mce:script>    
</html>