MaxLength ignored in multiline textbox. RSS

• • Reply
  

  khaos

  Contributor

  2855 Points

  690 Posts

  MaxLength ignored in multiline textbox.

  Apr 22, 2008 07:10 PM|LINK

  Problem : Maxlength property is ignored in multiline textboxes. [:@]

  Details of problem : When the TextMode property of a textbox is set to Multiline the MaxLength property will not limit the maximum length of user input.  This is due to the fact that multiline textboxes are rendered to the browser actually as a textarea which has no maxlenth property. (I believe a visual cue, like disable maxlength, when multiline is selected would be an added value.)

  Steps to reproduce this issue (for those who don’t know that its a problem)

  1. Add a Multiline textbox (txtMl.TextMode = Multiline)
  2. <div class=postentry>Add another singleline textbox (txtSl.TextMode = SingleLine). </div>
  3. <div class=postentry>Set the MaxLength of Both to 10. </div>
  4. <div class=postentry>Run the project </div>
     1. Observe: You can type as many characters as you wants in the multiline Textbox but not in the singleline Textbox

  Solution ~

  This problem can be solved by using Javascript to track how many characters typed in textbox. If the length of characters are over max number then we can simply ignore what the user type by returning “false” in javascript function.

  Step #1. Put the following function in your page.

  <script language="javascript">  
      function textboxMultilineMaxNumber(txt,maxLen){  
          try{  
              if(txt.value.length > (maxLen-1))

              return false;  
             }catch(e){  
             }  
      }  
  </script> 

  
  <script language="javascript">
      function textboxMultilineMaxNumber(txt,maxLen){
          try{
              if(txt.value.length > (maxLen-1))return false;
             }catch(e){
          }
      }
  </script>
  

  Step #2. Put the JS function in onkeypress event of Textbox.

  
  <asp:textbox id="txtMl" runat="server" Width="232px" TextMode="MultiLine" 
  onkeypress=<strong>"return textboxMultilineMaxNumber(this,10)"</strong>></asp:textbox> 

  As a side note remember to validate your data server side as javascript can be and often is disabled ... 

  Run the sample

  Observe: Both textboxes restrict the characters you type to 10 as desired.
  

  The main idea for this tip comes from Mike Sync's site.  I just wanted to make a non download type of tip out of it.

  HTH,

  Multiline textbox MaxLength

  Joe Johnston
  If a picture is worth a 1000 words, a sample application is worth a 1000 blog entries

  Remember the Constitution!
  Dont forget to mark posts answered and resolved (if they are)

• • Reply
  

  DigiMortal

  Contributor

  5658 Points

  939 Posts

  MVP

  Re: MaxLength ignored in multiline textbox.

  Apr 22, 2008 09:21 PM|LINK

  For multiline Textbox you should set Columns and Rows properties. Columns*Rows=max length of multiline Textbox text. Single line textbox is rendered as <input type="text"> and multi line textbox is rendered as TextArea.
  Don't forget to mark solution providing post as "Answered".
  
  Also visit my ASP.NET blog or follow me @ Twitter:twitter.com/gpeipman
• • Reply
  

  baijunagori

  Member

  9 Points

  5 Posts

  Re: MaxLength ignored in multiline textbox.

  Apr 23, 2008 06:22 AM|LINK

  You can use a regular expression validator instead 

  <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtGoals"
                      Display="Dynamic" ErrorMessage="Please limit to 1500 characters or less."
                      ValidationExpression="[\s\S]{1,1500}"></asp:RegularExpressionValidator>

   

  Only problem is it wont tell you when you reached the limit unless you change focus.

   

  Baiju Nagori

• • Reply
  

  smoothmovz

  Member

  25 Points

  34 Posts

  Re: MaxLength ignored in multiline textbox.

  May 21, 2008 07:05 AM|LINK

  <asp:textbox id="txtMl" runat="server" Width="232px" TextMode="MultiLine" onkeypress="return textboxMultilineMaxNumber(this,10)"></asp:textbox>

• • Reply
  

  atikatak

  Member

  57 Points

  18 Posts

  Re: MaxLength ignored in multiline textbox.

  Jun 09, 2008 10:20 PM|LINK

  Thanks for your infomation! ;)

• • Reply
  

  Sanotsh

  Member

  21 Points

  25 Posts

  Re: MaxLength ignored in multiline textbox.

  Aug 19, 2008 01:00 PM|LINK

   

  But what if user copy paste text in it?

  I tried this but its allowing me to enter characters more than max limit

  Swanty :)
  
• • Reply
  

  khaos

  Contributor

  2855 Points

  690 Posts

  Re: MaxLength ignored in multiline textbox.

  Aug 19, 2008 03:32 PM|LINK

  You could include another event like blur to truncate with notification etc.

  I meant to mention that issue.  In the tip.

  hth,

  Joe Johnston
  If a picture is worth a 1000 words, a sample application is worth a 1000 blog entries

  Remember the Constitution!
  Dont forget to mark posts answered and resolved (if they are)

• • Reply
  

  YdoIbother

  Member

  9 Points

  5 Posts

  Re: MaxLength ignored in multiline textbox.

  Sep 04, 2008 12:11 AM|LINK

  Thanks for the info.  VS was giving me a "Validation (ASP.Net): Attribute 'onkeypress' is not a valid attribute of element 'TextBox'." warning, so I added the onKeyPress in the Page_Load instead.  Here's the whole VB page:

   

  <%@ Page Language="VB" %>
  
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  
  <script runat="server">
  
  
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
          Me.TextBox1.Attributes.Add("onKeyPress", "return textboxMultilineMaxNumber(this,40);")
      End Sub
      
  
  </script>
      <script type="text/javascript">
          function textboxMultilineMaxNumber(txt,maxLen){
              try{
                  if(txt.value.length > (maxLen-1))
                  return false;
                 }catch(e){
                 }
          }
      </script>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title>MaxLength Example</title>
  </head>
  <body>
      <form id="form1" runat="server">
      <div>
  
  
          <asp:TextBox ID="TextBox1" runat="server" Text="Note that you can paste past the limit"
              Width="50%" Rows="5" BackColor="#FFFFCC" TextMode="MultiLine">
          </asp:TextBox>
          
  
          <br /><br />
          <asp:Button ID="Button1" runat="server" Text="Do Something" />
          <br /><br />
          
  
           <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1"
                      Display="Dynamic" ErrorMessage="Please limit to 40 characters or less."
                      ValidationExpression="[\s\S]{1,40}"></asp:RegularExpressionValidator>
      </div>
      </form>
  </body>
  </html>

   
  
• • Reply
  

  Sanotsh

  Member

  21 Points

  25 Posts

  Re: MaxLength ignored in multiline textbox.

  Sep 05, 2008 05:39 AM|LINK

  Thanks  :)

  Above code solved my problem of copy pasting the text in text box which exceeds max limit of text box.

   

  Swanty :)
  
• • Reply
  

  mpdillon

  Member

  17 Points

  62 Posts

  Re: MaxLength ignored in multiline textbox.

  Sep 06, 2008 01:30 PM|LINK

  I wanted to do the same thing this morning, limit the length of a multiline text box but I am a beginner and have two questions.

  Do I add

  <script runat="server">
  
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
          Me.TextBox1.Attributes.Add("onKeyPress", "return textboxMultilineMaxNumber(this,40);")
      End Sub
     
  </script>
  

  directly onto the .aspx file or does this belong in the .aspx.vb file?

   

  Second. I am using Master pages. Where do these scripts go on the non-Master page. There isn't a  regular header section on the .aspx page when using master pages.

  Do they go here? 

   <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

    <script type="text/javascript"> 
          function textboxMultilineMaxNumber(txt,maxLen){ 
              try{ 
                  if(txt.value.length > (maxLen-1))
                  return false; 
                 }catch(e){ 
                 } 
          } 
      </script>
  

   <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
      <style type="text/css">
          .style7
          {
              width: 209px;
          }
      </style>
  </asp:Content>

   

  Or do they go here? 

  <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

  <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
   <script type="text/javascript"> 
          function textboxMultilineMaxNumber(txt,maxLen){ 
              try{ 
                  if(txt.value.length > (maxLen-1))
                  return false; 
                 }catch(e){ 
                 } 
          } 
      </script>
  

       <style type="text/css">
          .style7
          {
              width: 209px;
          }
      </style>
  </asp:Content> 

  Thank you,

  pat