JS限制文本框录入长度（支持字符限制）

转:http://blog.csdn.net/civerb/article/details/4772007

 功能/特点：

 

1.实时显示可输入的字数（字节数）

 

2.两种限制方式（长度、字节数）

 

3.中文输入法下可正常使用，无BUG

 

4.同一页面可以使用多个，相互不干扰

 

limit.js

function limit(){  
    var txtNote;//文本框  
    var txtLimit;//提示字数的input  
    var limitCount;//限制的字数  
    var isbyte;//是否使用字节长度限制（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 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>

 

 

posted on 2013-03-21 10:43  雨季  阅读(1674)  评论(0)  编辑  收藏  举报