最经典的实现字符数控制的方案哦!(完善版)
当我们在ASP.NET开发时,经常会遇到一个头疼的问题:字符数的控制 
由于数据库的字段长度是固定的,因此在进行字符输入时,最关键的就是控制字符的个数不能超过字段的长度,要不然,一个个异常会让人疯掉的。
对于单行文本框,不管是HTML控件还是Web控件,我们经常会使用MaxLength来控制,但这种控制无法控制到中文字符,即MaxLength=50的控制,可以输入50个英文与50个中文,这样的话,还是会导致中文字符数的溢出。
对于多行文本框,那就更惨了,使用MaxLenth根本不起作用的。
下面提供的方案优势:
1)最佳的方法是在文本框中输入时,控制到最大字数,超过时不能进行输入;
![]() <script language="javascript">
<script language="javascript">  
![]() <!--
<!--  
![]() 
 
![]() String.prototype.len=function(){
String.prototype.len=function(){  
![]() return this.replace(/[^\x00-\xff]/g,"**").length;
return this.replace(/[^\x00-\xff]/g,"**").length;  
![]() }
}  
![]() 
 
![]() //Set maxlength for multiline TextBox
//Set maxlength for multiline TextBox  
![]() function setMaxLength(object,length)
function setMaxLength(object,length)  
![]() {
{ 
![]() 
     
![]() var result = true;
    var result = true;  
![]() var controlid = document.selection.createRange().parentElement().id;
    var controlid = document.selection.createRange().parentElement().id;  
![]() var controlValue = document.selection.createRange().text;
    var controlValue = document.selection.createRange().text;  
![]() var tempString=object.value;
    var tempString=object.value; 
![]() 
     
![]() var tt="";
    var tt="";  
![]() for(var i=0;i<length;i++)
    for(var i=0;i<length;i++)  
![]() {
        {  
![]() if(tt.len()<length)
            if(tt.len()<length)  
![]() tt=tempString.substr(0,i+1);
                tt=tempString.substr(0,i+1);  
![]() else
            else  
![]() break;
                break;  
![]() }
        }  
![]() if(tt.len()>length)
    if(tt.len()>length) 
![]() tt=tt.substr(0,tt.length-1);
        tt=tt.substr(0,tt.length-1); 
![]() object.value=tt;
    object.value=tt; 
![]() 
     
![]() 
     
![]() }
}  
![]() 
 
![]() //Check maxlength for multiline TextBox when paste
//Check maxlength for multiline TextBox when paste  
![]() function limitPaste(object,length)
function limitPaste(object,length)  
![]() {
{  
![]() var tempLength = 0;
        var tempLength = 0;  
![]() if(document.selection)
        if(document.selection)  
![]() {
        {  
![]() if(document.selection.createRange().parentElement().id == object.id)
            if(document.selection.createRange().parentElement().id == object.id)  
![]() {
            {  
![]() tempLength = document.selection.createRange().text.len();
                tempLength = document.selection.createRange().text.len();  
![]() }
            }  
![]() }
        }  
![]() var tempValue = window.clipboardData.getData("Text");
        var tempValue = window.clipboardData.getData("Text");  
![]() tempLength = object.value.len() + tempValue.len() - tempLength;
        tempLength = object.value.len() + tempValue.len() - tempLength;  
![]() 
 
![]() if (tempLength > length)
        if (tempLength > length)  
![]() {
        {  
![]() tempLength -= length;
            tempLength -= length;  
![]() var tt="";
            var tt="";  
![]() for(var i=0;i<tempValue.len()-tempLength;i++)
            for(var i=0;i<tempValue.len()-tempLength;i++)  
![]() {
                {  
![]() if(tt.len()<(tempValue.len()-tempLength))
                    if(tt.len()<(tempValue.len()-tempLength))  
![]() tt=tempValue.substr(0,i+1);
                        tt=tempValue.substr(0,i+1);  
![]() else
                    else  
![]() break;
                        break;  
![]() }
                }  
![]() if(tt.len()<=0)
            if(tt.len()<=0) 
![]() {
            {     
![]() window.event.returnValue=false;
                window.event.returnValue=false; 
![]() 
                 
![]() }
            } 
![]() else
            else 
![]() {
            { 
![]() tempValue=tt;
                tempValue=tt;  
![]() window.clipboardData.setData("Text", tempValue);
                window.clipboardData.setData("Text", tempValue);  
![]() window.event.returnValue = true;
                window.event.returnValue = true;  
![]() }
            } 
![]() }
        }  
![]() 
     
![]() 
 
![]() }
}  
![]() 
 
![]() function PressLength()
function PressLength() 
![]() {
{ 
![]() 
     
![]() if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
    if(event.srcElement.type=="text" || event.srcElement.type=="textarea" ) 
![]() {
    { 
![]() if(event.srcElement.length!=null)
        if(event.srcElement.length!=null) 
![]() setMaxLength(event.srcElement,event.srcElement.length);
            setMaxLength(event.srcElement,event.srcElement.length); 
![]() 
         
![]() }
    } 
![]() }
} 
![]() 
 
![]() function LimitLength()
function LimitLength() 
![]() {
{ 
![]() 
 
![]() if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
    if(event.srcElement.type=="text" || event.srcElement.type=="textarea" ) 
![]() {
    { 
![]() if(event.srcElement.length!=null)
        if(event.srcElement.length!=null) 
![]() limitPaste(event.srcElement,event.srcElement.length);
            limitPaste(event.srcElement,event.srcElement.length); 
![]() }
    } 
![]() }
} 
![]() document.documentElement.attachEvent('onkeyup', PressLength);
document.documentElement.attachEvent('onkeyup', PressLength);  
![]() document.documentElement.attachEvent('onpaste', LimitLength);
document.documentElement.attachEvent('onpaste', LimitLength); 
![]() 
 
![]() //-->
//-->  
![]() </script>
        </script> 
  
![]() <INPUT  type="text" length="3">
<INPUT  type="text" length="3"> 
![]() <TEXTAREA length="20"  rows="2" cols="20"></TEXTAREA>
<TEXTAREA length="20"  rows="2" cols="20"></TEXTAREA> 
![]() <asp:TextBox id="TextBox1"  runat="server" length="7"></asp:TextBox>
<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就可以了。
<asp:TextBox id="TextBox2" runat="server" TextMode="MultiLine" length="10"></asp:TextBox> 上面是HTML控件与Web控件的例子,只要加一个length就可以了。 
好了,大家可以体验一下了哦:https://files.cnblogs.com/tintown/stringLenth3.rar (已经修改复了“没有length无法输入的问题”)
个人建议:1)可以把这个脚本块放在js文件中,进行引用即可
2)可以把脚本放在BasePage中,这样每个页面都可以使用了
3)可以使用这些脚本块,开发专门的服务器端控件,我没有时间开发,如果有朋友可以开发了发布一下哦!
由于数据库的字段长度是固定的,因此在进行字符输入时,最关键的就是控制字符的个数不能超过字段的长度,要不然,一个个异常会让人疯掉的。
对于单行文本框,不管是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">
<script language="javascript">   <!--
<!--   
  String.prototype.len=function(){
String.prototype.len=function(){   return this.replace(/[^\x00-\xff]/g,"**").length;
return this.replace(/[^\x00-\xff]/g,"**").length;   }
}   
  //Set maxlength for multiline TextBox
//Set maxlength for multiline TextBox   function setMaxLength(object,length)
function setMaxLength(object,length)   {
{  
      var result = true;
    var result = true;   var controlid = document.selection.createRange().parentElement().id;
    var controlid = document.selection.createRange().parentElement().id;   var controlValue = document.selection.createRange().text;
    var controlValue = document.selection.createRange().text;   var tempString=object.value;
    var tempString=object.value;  
      var tt="";
    var tt="";   for(var i=0;i<length;i++)
    for(var i=0;i<length;i++)   {
        {   if(tt.len()<length)
            if(tt.len()<length)   tt=tempString.substr(0,i+1);
                tt=tempString.substr(0,i+1);   else
            else   break;
                break;   }
        }   if(tt.len()>length)
    if(tt.len()>length)  tt=tt.substr(0,tt.length-1);
        tt=tt.substr(0,tt.length-1);  object.value=tt;
    object.value=tt;  
      
      }
}   
  //Check maxlength for multiline TextBox when paste
//Check maxlength for multiline TextBox when paste   function limitPaste(object,length)
function limitPaste(object,length)   {
{   var tempLength = 0;
        var tempLength = 0;   if(document.selection)
        if(document.selection)   {
        {   if(document.selection.createRange().parentElement().id == object.id)
            if(document.selection.createRange().parentElement().id == object.id)   {
            {   tempLength = document.selection.createRange().text.len();
                tempLength = document.selection.createRange().text.len();   }
            }   }
        }   var tempValue = window.clipboardData.getData("Text");
        var tempValue = window.clipboardData.getData("Text");   tempLength = object.value.len() + tempValue.len() - tempLength;
        tempLength = object.value.len() + tempValue.len() - tempLength;   
  if (tempLength > length)
        if (tempLength > length)   {
        {   tempLength -= length;
            tempLength -= length;   var tt="";
            var tt="";   for(var i=0;i<tempValue.len()-tempLength;i++)
            for(var i=0;i<tempValue.len()-tempLength;i++)   {
                {   if(tt.len()<(tempValue.len()-tempLength))
                    if(tt.len()<(tempValue.len()-tempLength))   tt=tempValue.substr(0,i+1);
                        tt=tempValue.substr(0,i+1);   else
                    else   break;
                        break;   }
                }   if(tt.len()<=0)
            if(tt.len()<=0)  {
            {      window.event.returnValue=false;
                window.event.returnValue=false;  
                  }
            }  else
            else  {
            {  tempValue=tt;
                tempValue=tt;   window.clipboardData.setData("Text", tempValue);
                window.clipboardData.setData("Text", tempValue);   window.event.returnValue = true;
                window.event.returnValue = true;   }
            }  }
        }   
      
  }
}   
  function PressLength()
function PressLength()  {
{  
      if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
    if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )  {
    {  if(event.srcElement.length!=null)
        if(event.srcElement.length!=null)  setMaxLength(event.srcElement,event.srcElement.length);
            setMaxLength(event.srcElement,event.srcElement.length);  
          }
    }  }
}  
  function LimitLength()
function LimitLength()  {
{  
  if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
    if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )  {
    {  if(event.srcElement.length!=null)
        if(event.srcElement.length!=null)  limitPaste(event.srcElement,event.srcElement.length);
            limitPaste(event.srcElement,event.srcElement.length);  }
    }  }
}  document.documentElement.attachEvent('onkeyup', PressLength);
document.documentElement.attachEvent('onkeyup', PressLength);   document.documentElement.attachEvent('onpaste', LimitLength);
document.documentElement.attachEvent('onpaste', LimitLength);  
  //-->
//-->   </script>
        </script>  <INPUT  type="text" length="3">
<INPUT  type="text" length="3">  <TEXTAREA length="20"  rows="2" cols="20"></TEXTAREA>
<TEXTAREA length="20"  rows="2" cols="20"></TEXTAREA>  <asp:TextBox id="TextBox1"  runat="server" length="7"></asp:TextBox>
<asp:TextBox id="TextBox1"  runat="server" length="7"></asp:TextBox>  <asp:TextBox id="TextBox2" runat="server" TextMode="MultiLine" length="10"></asp:TextBox>
<asp:TextBox id="TextBox2" runat="server" TextMode="MultiLine" length="10"></asp:TextBox> 好了,大家可以体验一下了哦:https://files.cnblogs.com/tintown/stringLenth3.rar (已经修改复了“没有length无法输入的问题”)
个人建议:1)可以把这个脚本块放在js文件中,进行引用即可
2)可以把脚本放在BasePage中,这样每个页面都可以使用了
3)可以使用这些脚本块,开发专门的服务器端控件,我没有时间开发,如果有朋友可以开发了发布一下哦!

 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号