• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

JavaScript 限制文本框输入长度(支持字符限制)

JavaScript 水墨上仙 2660次浏览

JavaScript 限制文本框输入长度(支持字符限制)
转自:http://blog.csdn.net/bluceyoung/article/details/6213089

功能&特点:

1.实时显示可输入的字数(字节数)

2.两种限制方式(长度、字节数)

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

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

&nbsp

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 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>    
 


喜欢 (0)
加载中……