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> 

 

 

你可能感兴趣的:(文本框)