Developers use multiline TextBox controls in almost all web projects. Since MaxLength property of a TextBox control does not work when the TextMode property is set to Multiline, we usually use Validator controls to validate the length. In this hands-on article, we are going to extend the TextBox control using JavaScript in order to limit the number of characters entered by the user to the length specified.  

TextArea Custom Server Control - C# Code
TextArea Custom Server Control - C# Code


The code above creates a new TextArea custom server control by extending ASP.NET’s TextBox control. By overriding the OnPreRender function, we include attributes to the HTML of the control. We add custom javascripts and a property to pass maxLength on client side.

To show the working TextArea control, I prepared the following html:

TextArea Custom Server Control - HTML Code
TextArea Custom Server Control - HTML Code


In the above HTML, I register the custom control with the web page by using the following line:

<%@ Register TagPrefix="csc" Namespace="CustomServerControls" %>

If you don’t want to add the above registration line on each page that you use the TextArea control, you may add the following statement in system.web section of the web.config file.

<pages>
   <controls>
    <add tagPrefix="csc" namespace="CustomServerControls"></add>
   </controls>
</pages>

I added the control on page as:

<csc:TextArea id="TextArea" runat="server" MaxLength="105" Rows="10" Width="300px"></csc:TextArea>

Let’s compare the rendered output of a multiline textbox control and our text area control:

Rendered output of a standard multiple line Asp.Net TextBox is:

<textarea name="TextArea" id="TextArea" rows="10" cols="20" style="width:300px;" ></textarea>

Rendered output of our TextArea custom server control is:

<textarea name="TextArea" rows="10" cols="20" id="TextArea" onkeypress="LimitInput(this)" onbeforepaste="doBeforePaste(this)" onpaste="doPaste(this)" onmousemove="LimitInput(this)" maxLength="105" style="width:300px;"></textarea>

The javascript event handlers doBeforePaste and doPaste are only implemented in Internet Explorer. These event handlers are used to check the length of characters that are pasted by using a mouse in Internet Explorer. Unfortunately, doBeforePaste and doPaste event handlers  are not defined in other browsers and we cannot catch a mouse paste in browsers other than IE. Therefore,   I added an onmousemove event handler in order to check the length of characters that are pasted by using a mouse after a mouse move. The onkeypress event handler handles the standard character input.

TextArea Custom Server Control - JavaScript Code
TextArea Custom Server Control - JavaScript Code


Download the demo project

Try TextArea Custom Server Control with MaxLength property

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Currently rated 5.0 by 3 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5




Comments

February 21. 2008 21:53

Nice! Exactly what i was looking for...
Is there ANY way i could get that in VB instead of C#??

Sandro

July 9. 2008 12:08

Hi

First of all thanks for this component.

I was able to input more words in firefox then the script actually allows. When you paste text into the textbox and have your mouse cursor allready on the button to submit it will accept the input.

But it does exactly what you typed:

Therefore, I added an onmousemove event handler in order to check the length of characters that are pasted by using a mouse after a mouse move. The onkeypress event handler handles the standard character input.

Maybe a extra onmouseclick event?

Sjoerd Perfors

Add comment





(will not be displayed)








  • javascript
  • querystring
  • url parameters
  • parse querystring
  • delayed redirect
  • settimeout
  • focus
  • textbox
  • page load
  • after submit
  • set focus in asp.net 2.0/3.5
  • on page load
  • after postback
  • set control focus
  • postback
  • asp.net 1.x
  • substring
  • substr
  • javascript string methods
  • parsefloat
  • convert strings to numbers
  • parseint
  • javascript history
  • history.go
  • history.back
  • http requests
  • image maps
  • css sprites
  • external css
  • external javascript
  • compress javascript
  • javascript compression
  • ajaxcontroltoolkit
  • tab control
  • array
  • length
  • javascipt
  • lastmodified
  • mstsc
  • terminal services
  • remote desktop connections
  • null
  • undefined
  • array.join
  • string concatenation
  • setinterval
  • clearinterval
  • timing events
  • cleartimeout
  • javascript timing events
  • url redirection
  • location.href
  • location.replace
  • redirect
  • redirection
  • system.io.compression
  • viewstate compression
  • compress viewstate
  • gzipstream
  • loadpagestatefrompersistencemedium
  • savepagestatetopersistencemedium
  • form spam
  • captcha
  • prevent spam without captcha
  • url redirect
  • defaultbutton
  • enter key
  • default button
  • asp.net
  • 2.0
  • form
  • panel
  • 1.1
  • form submit
  • dopostback
  • onkeypress
  • onkeydown
  • onkeyup
  • javascript key events
  • keycode 13
  • disable enter key
  • int32.parse
  • convert.toint32
  • int32.tryparse
  • google
  • hoax
  • gmail
  • storage
  • counter
  • mail
  • visual studio 2005
  • vs 2008
  • copy
  • paste
  • clipboard data
  • static variables
  • application object
  • static property
  • server control
  • web file manager
  • iz web file manager
  • convert
  • parse
  • tryparse
  • file upload control
  • maxrequestlength
  • executiontimeout
  • httpruntime
  • asp.net 2.0
  • registering scripts
  • registerclientscript
  • registerstartupscript
  • cross-browser
  • events
  • improve web site performance
  • compression
  • caching
  • elmah
  • error logging
  • exception
  • error
  • httphandler
  • google sitemap generator
  • sitemap
  • internet information services
  • iis7
  • hosts file
  • localhost
  • windows vista
  • search engine optimization
  • seo
  • search engine friendly pages
  • headscriptmanager
  • class library
  • head
  • css
  • c#
  • iis
  • internet information services manager
  • 401.3 unauthorized
  • 500.0 internal server error
  • http error 500.19
  • google toolbar
  • yellow input fields
  • input
  • select
  • background color
  • mozilla firefox
  • medium trust
  • orcas
  • compileroptions
  • warninglevel
  • zyb
  • mobile phones
  • online backup service
  • online services
  • textarea
  • maxlength
  • limit input length
  • custom server control
  • internal error 2739
  • adobe cs3
  • adobe customer support
  • solution
  • error code 0x80004005
  • 500.19 internal server error
  • meta tags
  • keywords meta tag
  • meta
  • description meta tag
  • fake page rank domains
  • scammers
  • google page rank technology
  • ebay
  • general
  • title
  • page rank