• 最经典的实现字符数控制的方案哦!(完善版)(转)


    当我们在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就可以了。

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

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

  • 相关阅读:
    人们常说的带宽是什么意思?
    关注前端性能
    单测学习笔记
    基于 Istanbul 生成测试用例覆盖率报告
    如何做高水科研
    Human-like Controllable Image Captioning with Verb-specific Semantic Roles(具有动词语义角色的类人可控图像字幕生成)
    Netty应用程序的全部基本构建模块_netty学习笔记(2)-20210405
    异步和事件驱动_netty学习笔记(1)-20210330
    理解 cosocket(转)
    nginx lua阶段处理流程
  • 原文地址:https://www.cnblogs.com/hahaha22/p/1382625.html
Copyright © 2020-2023  润新知