 |
Web Development »
ASP.NET »
General
Beginner
Extending the ASP.Net Multiline TextBox control to limit the number of characters enteredBy blogging developerDevelopers 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. |
Javascript, HTML, C# 2.0, Windows, .NET 2.0, ASP.NET, WebForms, IIS 5.1, IIS 6, VS2005, IE 6.0, IE 5.5, IE 7, Dev
|
||||||||||
|
Advanced Search |
|
|
|
||||||||||||||||
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.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Globalization;
using System.Threading;
namespace CustomServerControls
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:TextArea runat="server"></{0}:TextArea>")]
public class TextArea : TextBox
{
public override TextBoxMode TextMode
{
get
{
return TextBoxMode.MultiLine;
}
}
protected override void OnPreRender(EventArgs e)
{
if (MaxLength > 0)
{
if (!Page.ClientScript.IsClientScriptIncludeRegistered("TextArea"))
{
Page.ClientScript.RegisterClientScriptInclude("TextArea", ResolveUrl("~/textarea.js"));
}
this.Attributes.Add("onkeyup", "LimitInput(this)");
this.Attributes.Add("onbeforepaste", "doBeforePaste(this)");
this.Attributes.Add("onpaste", "doPaste(this)");
this.Attributes.Add("onmousemove", "LimitInput(this)");
this.Attributes.Add("maxLength", this.MaxLength.ToString());
}
base.OnPreRender(e);
}
}
}
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:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="csc" Namespace="CustomServerControls" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TextArea Custom Server Control with MaxLength property</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<csc:TextArea id="TextArea" runat="server" MaxLength="105" Rows="10" Width="300px"></csc:TextArea>
</div>
</form>
</body>
</html>
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:<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.
function doBeforePaste(control)
{
maxLength = control.attributes["maxLength"].value;
if(maxLength)
{
event.returnValue = false;
}
}
function doPaste(control)
{
maxLength = control.attributes["maxLength"].value;
value = control.value;
if(maxLength){
event.returnValue = false;
maxLength = parseInt(maxLength);
var o = control.document.selection.createRange();
var iInsertLength = maxLength - value.length + o.text.length;
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
o.text = sData;
}
}
function LimitInput(control)
{
if(control.value.length >
Updates:
Nov 10th, 2007 - onkeypress javascript event handler is changed with onkeyup javascript event handler. (You may check the reason at KeyPress, KeyDown, KeyUp - The Difference Between Javascript Key Events)
Nov 9th, 2007 - instead of using 'ResolveClientUrl' method to access textarea.js which may cause a problem in case of url rewriting, 'ResolveUrl' method is used.
The code is tested on Firefox, IE 6.0 and IE 7.0.
Try the online demo of extended Asp.net multiline TextBox control that limits the number of characters entered.
You may find more articles about Asp.net, JavaScript, C# on my blog.
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 16 Nov 2007 Editor: |
Copyright 2007 by blogging developer Everything else Copyright © CodeProject, 1999-2009 Web17 | Advertise on the Code Project |
