20101117 学习记录：textarea的最大输入字数限制

测试：

第一种方法会限制住指定字符数，再想多输入一个也输不进去，即使是复制也会自动截断，不过这里加了一个alert提醒。可去掉~

缺点是限制住了一些功能，比如 选中输入内容后回车什么的按键失效，而且换行好像也被认为是字符，而且占用的貌似不止一个...

第二种方法不会有第一种那么多限制，不过在多输入限制字符范围外的内容时，会出现一下再被截去，也就是会有点闪。复制同理，会先闪一下再消失。

 

总体来说还是喜欢第二种，即使会闪一下但是貌似也没什么影响，而且这样用户就知道不能再继续输入了。第一种限制的好严格。有时候键盘的某些键会失灵...

 

方法1

< textarea maxlength = " 5 "  onkeypress = " return imposeMaxLength(this) "  onblur = " ismaxlength(this) " >< / textarea>

< script type = " text/javascript " >
      function  ismaxlength(obj)
    {
         var  mlength = obj.getAttribute ?  parseInt(obj.getAttribute( " maxlength " )) :  ""
         if  (obj.getAttribute  &&  obj.value.length > mlength)  
        alert( ' MaxLength is  ' + mlength + " . " )  
        obj.value = obj.value.substring( 0 ,mlength)
    }
    
     function  imposeMaxLength(obj)
    {  
         var  mlength = obj.getAttribute ?  parseInt(obj.getAttribute( " maxlength " )) :  ""   
         return  (obj.value.length  < mlength);
    }

< / script> 

 方法2

< textarea maxlength = "5 "   onKeyUp = " return validateMaxLength(this); "  onKeyDown = " return validateMaxLength(this); "   >

< script type = " text/javascript " >
     function  validateMaxLength(parmObject)
    {
         var  mlength  =  parmObject.getAttribute ?  parseInt(parmObject.getAttribute( " maxlength " )) :  ""
        
         if  (parmObject.getAttribute  &&  parmObject.value.length  >  mlength)
            parmObject.value  =  parmObject.value.substring( 0 ,mlength)
    }
< / script>

 其他...

别人的方法

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 方法1--兼容ie+ff,光标闪烁截断多余文字 </ title >
< script  type ="text/javascript" >
function  ismaxlength(obj){
var  mlength = obj.getAttribute ?  parseInt(obj.getAttribute( " maxlength " )) :  ""
if  (obj.getAttribute  &&  obj.value.length > mlength)
obj.value = obj.value.substring( 0 ,mlength)
}
</ script >
</ head >
< body >
< textarea  maxlength ="10"  onkeyup ="return ismaxlength(this)" ></ textarea >
</ body >
</ html >

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 方法2--兼容ie+ff,ctrl复制文字会超出范围.html </ title >
< script  language ="javascript"  type ="text/javascript" >
<!--
function  imposeMaxLength(Object, MaxLen)
{
return  (Object.value.length  < MaxLen);
}
-->
</ script >
</ head >
< body >< textarea  name ="myName"  onkeypress ="return imposeMaxLength(this, 10);"   ></ textarea >
</ body >
</ html >

< html >
< head >
< title > 方法3--无法通过ctrl+c复制（FF无效） </ title >
</ head >
< body >
< form  method =post  name =ceshi  action ="index.htm" >
    < textarea  name =textarea1  onpropertychange =checkMaxLen(this,10,0) ></ textarea >
</ form >
    < script  language =javascript >
var  oldValue = new  Array();
function  checkMaxLen(obj,maxlength,num){
    if (obj.value.length > maxlength){
    obj.value = oldValue[num];
   }
    else {
    oldValue[num] = obj.value;
   }
}
</ script >
</ body >
</ html >

< html >
< head >
< title > 方法4-标闪烁截断多余文字（FF无效） </ title >
< script  type ="text/javascript" >
var  textarea_maxlen  =  {
isMax :  function  (){
    var  textarea  =  document.getElementById( " area " );
    var  max_length  =  textarea.maxLength;
if (textarea.value.length  >  max_length){
   textarea.value  =  textarea.value.substring( 0 , max_length);
   }
},
disabledRightMouse :  function  (){
document.oncontextmenu  =   function  (){  return   false ; }},
enabledRightMouse :  function  (){
document.oncontextmenu  =   null ;}};
</ script >
</ head >
< body >
< textarea  id ="area"  maxLength ="10"    onkeyup ="textarea_maxlen.isMax()"    onfocus ="textarea_maxlen.disabledRightMouse()"    onblur ="textarea_maxlen.enabledRightMouse()"  rows ="20"  cols ="100" ></ textarea >
</ body >
</ html >


方法5-js和css控制，显示还可输入的字数：
MaxLength on a Textarea：http://blog.offbeatmammal.com/post/2006/10/26/MaxLength-on-a-Textarea.aspx

 该javascript控制了输入,粘贴,拖放操作

js代码

function  SetTextAreaMaxLength(controlId,length)
{
     //  JScript File for TextArea
     //  Keep user from entering more than maxLength characters
     function  doKeypress(control,length){
        maxLength  =  length;
        value  =  control.value;
         if (maxLength  &&  value.length  >  maxLength - 1 ){
            event.returnValue  =   false ;
            maxLength  =  parseInt(maxLength);
        }
    }
     //  Cancel default behavior
     function  doBeforePaste(control,length){
        maxLength  =  length;
         if (maxLength)
        {
            event.returnValue  =   false ;
        }
    }
     //  Cancel default behavior and create a new paste routine
     function  doPaste(control,length){
        maxLength  =  length;
        value  =  control.value;
         if (maxLength){
            event.returnValue  =   false ;
            maxLength  =  parseInt(maxLength);
             var  oTR  =  control.document.selection.createRange();
             var  iInsertLength  =  maxLength  -  value.length  +  oTR.text.length;
             var  sData  =  window.clipboardData.getData( " Text " ).substr( 0 ,iInsertLength);
            oTR.text  =  sData;
        }
    }
    
     function  doDragenter(control,length)
    {
        maxLength  =  length;
        value  =  control.value;
         if (maxLength){
            event.returnValue  =   false ;
        }   
    }

    
     function  addEvent(elm, evType, fn, useCapture)
    { 
         if  (elm.addEventListener)
        { 
            elm.addEventListener(evType, fn, useCapture); 
             return   true ; 
        } 
         else   if  (elm.attachEvent) 
        { 
             var  r  =  elm.attachEvent( ' on '   +  evType, fn); 
             return  r; 
        } 
         else  { 
            elm[ ' on '   +  evType]  =  fn; 
        } 
    }


     function  AttacheventTextAreaBeforePaste(obj,length)
    {
         return   function ()
        {
            doBeforePaste(obj,length)
        }
    }
    
     function  AttacheventTextAreaPaste(obj,length)
    {
         return   function ()
        {
            doPaste(obj,length)
        }
    }
    
     function  AttacheventTextAreaKeyPress(obj,length)
    {
         return   function ()
        {
            doKeypress(obj,length)
        }
        
    }
    
     function  AttacheventTextAreaDragEnter(obj,length)
    {
         return   function ()
        {
            doDragenter(obj,length);
        }
    }
    
    
     var  obj  =  document.getElementById(controlId);
    
    addEvent(obj, ' keypress ' ,AttacheventTextAreaKeyPress(obj,length), null );
    addEvent(obj, ' beforepaste ' ,AttacheventTextAreaBeforePaste(obj,length), null );
    addEvent(obj, ' paste ' ,AttacheventTextAreaPaste(obj,length), null );
    addEvent(obj, ' dragenter ' ,AttacheventTextAreaDragEnter(obj,length), null ); 
}

html代码

< asp:TextBox  ID ="TextBoxAddress"  runat ="server"  Width ="200px"  
                        TextMode ="MultiLine"  Height ="113px"  MaxLength ="10" ></ asp:TextBox >

     < script  language ="javascript"  type ="text/javascript" >
    SetTextAreaMaxLength( ' <%=TextBoxAddress.ClientID %> ' , 10 );
    
</ script >

http://blog.csdn.net/jjkk168/archive/2009/07/25/4380540.aspx

 

转载于:https://www.cnblogs.com/neru/archive/2010/11/17/1879801.html