javascript最经典的实现字符数控制的方案 javascript最经典的实现字符数控制的方案

来源:互联网 发布:淘宝兼职怎么做 编辑:程序博客网 时间:2024/06/06 07:00
当我们在ASP.NET开发时,经常会遇到一个头疼的问题:字符数的控制
 由于数据库的字段长度是固定的,因此在进行字符输入时,最关键的就是控制字符的个数不能超过字段的长度,要不然,一个个异常会让人疯掉的。
  对于单行文本框,不管是HTML控件还是Web控件,我们经常会使用MaxLength来控制,但这种控制无法控制到中文字符,即MaxLength=50的控制,可以输入50个英文与50个中文,这样的话,还是会导致中文字符数的溢出。
  对于多行文本框,那就更惨了,使用MaxLenth根本不起作用的。

下面提供的方案优势: 
  1)最佳的方法是在文本框中输入时,控制到最大字数,超过时不能进行输入;

 2)对于粘帖的情况也要能兼容,以前网上的方法不能控制到paste的情况;

 3)对于最后的一个中文字符,宁愿舍去也不能多一个字符,比如50的字符数,在第49个时,最后输入一个中文,会导致最终字数为51,而这种情况,推荐是不能输入中文,保证最终的字符数<=50最佳,因为放弃一个中文字符总比数据库报错要好吧。
 4)为了提高开发效率,尽可能的减少代码量,此方案不需要为文本框添加任何事件,而是由脚本块自己解决,因此只需要把脚本块饮包含到页面中就可以了,这应该是相当方便了吧。

具体新方案实现:
 1)将以下的代码包含到页面中:
<script language="javascript"> 
<!--  
String.prototype.len
=function(){ 
return this.replace(/[^ x00- xff]/g,"**").length; 
}  
//Set maxlength for multiline TextBox 
function setMaxLength(object,length) 

    
var result = true;  
    
var controlid = document.selection.createRange().parentElement().id;  
    
var controlValue = document.selection.createRange().text;  
    
var tempString=object.value; 
    
var tt="";  
    
for(var i=0;i<length;i++)  
        {  
            
if(tt.len()<length)  
                tt
=tempString.substr(0,i+1);  
            
else  
                
break;  
        }  
    
if(tt.len()>length) 
        tt
=tt.substr(0,tt.length-1); 
    object.value
=tt; 
 }  
//Check maxlength for multiline TextBox when paste 
function limitPaste(object,length) 
{  
        
var tempLength = 0;  
        
if(document.selection)  
        {  
            
if(document.selection.createRange().parentElement().id == object.id)  
            {  
                tempLength 
= document.selection.createRange().text.len();  
            }  
        }  
        
var tempValue = window.clipboardData.getData("Text");  
        tempLength 
= object.value.len() + tempValue.len() - tempLength;  
 
        
if (tempLength > length)  
        {  
            tempLength 
-= length;  
            
var tt="";  
            
for(var i=0;i<tempValue.len()-tempLength;i++)  
                {  
                    
if(tt.len()<(tempValue.len()-tempLength))  
                       tt
=tempValue.substr(0,i+1);  
                    
else  
                        
break;  
                }  
            
if(tt.len()<=0
            {     
                window.event.returnValue
=false
                 
            } 
            
else 
            { 
                tempValue
=tt;  
                window.clipboardData.setData(
"Text", tempValue);  
                window.event.returnValue 
= true;  
            } 
        }  
 }  
function PressLength()

     
    
if(event.srcElement.type=="text" || event.srcElement.type=="textarea" ) 
    { 
        
if(event.srcElement.length!=null
            setMaxLength(event.srcElement,event.srcElement.length); 
         
    }


function LimitLength()

 
    
if(event.srcElement.type=="text" || event.srcElement.type=="textarea" ) 
    { 
        
if(event.srcElement.length!=null
            limitPaste(event.srcElement,event.srcElement.length); 
    }
}
document.documentElement.attachEvent('onkeyup', PressLength); 
document.documentElement.attachEvent('onpaste', LimitLength); 
//-->  
        </script>

2)在需要控制的控件上添加length="n"(n为要控制的字数)即可,如:

<asp:TextBox id="TextBox1"  runat="server" length="7"></asp:TextBox>

个人建议:1)可以把这个脚本块放在js文件中,进行引用即可 
          2)可以把脚本放在BasePage中,这样每个页面都可以使用了 
          3)可以使用这些脚本块,开发专门的服务器端控件,我没有时间开发,如果有朋友可以开发了发布一下哦!  

原创粉丝点击