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

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

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

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

  3)对于最后的一个中文字符,宁愿舍去也不能多一个字符,比如50的字符数,在第49个时,最后输入一个中文,会导致最终字数为51,而这种情况,推荐是不能输入中文,保证最终的字符数<=50最佳,因为放弃一个中文字符总比数据库报错要好吧。
 4)为了提高开发效率,尽可能的减少代码量,此方案不需要为文本框添加任何事件,而是由脚本块自己解决,因此只需要把脚本块饮包含到页面中就可以了,这应该是相当方便了吧 
 
完善版修改:由于前一个方案中,一些输入法无法激活onpress事件,导致对于中文的不支持,现在采用onkeyup事件处理,在处理方式上也进行了修改,原来的onpress事件是进行输入控制,而onkeyup只能对已经输入后的字数进行字数判断,过长的进行截短处理。

  在原方案中,有位朋友指出:数据采用n(type)系统不会报错,是的,如果采用n(type)的话,是以字符为基础的,可以不考虑数据库出错的可能性,但同样也存在一个界面显示的问题,比如界面上的Address值,希望是100个字符,如果不进行中英文字数区分,最多将输入100个中文,从而占200个字节空间,导致Adress在显示时会超过预料的空间,界面搞得不易控制。因此,此方案还是有可取之处的。
具体新方案实现:
 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为要控制的字数)即可,如:
 
< INPUT   type ="text"  length ="3" >
< TEXTAREA  length ="20"   rows ="2"  cols ="20" ></ TEXTAREA >
< asp:TextBox  id ="TextBox1"   runat ="server"  length ="7" ></ asp:TextBox >
< asp:TextBox  id ="TextBox2"  runat ="server"  TextMode ="MultiLine"  length ="10" ></ asp:TextBox >
上面是HTML控件与Web控件的例子,只要加一个length就可以了。

 好了,大家可以体验一下了哦: http://www.cnblogs.com/Files/tintown/stringLenth3.rar (已经修改复了“没有length无法输入的问题”)

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值