TextBox.MultiLine maxlength

Is there some way of setting the MaxLength of a TextBox when it is in Mulitline TextMode? MSDN says the MaxLength doesn't work when in Multiline mode, but there has to be a way. I'm trying to make Textbox that allows two lines of input and no more. Ideally, it wouldn't let the user keep typing... Thanks.

Re: TextBox.MultiLine maxlength

For that you must have some script. I have one you need. If you mean to restrict user input on several characters!

Re: TextBox.MultiLine maxlength

Yes, I am trying to restrict the maximum number of characters to 60 in a MultiLine TextBox.

Re: TextBox.MultiLine maxlength

Has anyone found a solution to restricting the user's input in a multiline textbox??? I know that after the user has entered his/her information i can verify that there are the right amount of characters. The problem is that if i am wanting to keep the field down to 100 characters and they have just spend all of their time entering in 1000 characters, then it's been a complete waste of time for them. What I am trying to find is a way to restrict the length for a multiline textbox as in a singleline textbox; once the reach character 100....they can't enter any more information. does anyone have a solution to this????

Re: TextBox.MultiLine maxlength

Hi, You can use this JavaScript code to control it ...

<script language="javascript">
function Count(text,long)
{
	var maxlength = new Number(long); // Change number to your max length.
	if (text.value.length > maxlength){
		text.value = text.value.substring(0,maxlength);
		alert(" Only " + long + " chars");
	}
}

and use it in the text element's events onKeyUp="Count(this,200)" onChange="Count(this,200)"

Re: TextBox.MultiLine maxlength

BEAUTIMUS!!!! thank you very much

Re: TextBox.MultiLine maxlength

Nice Code!

Re: TextBox.MultiLine maxlength

Can anybody advise why code from Guille.Net cannot work on Mozilla? It would be great if somebody can suggest a solution that can work with Mozilla/Netscape. Thanks. Henry

Re: TextBox.MultiLine maxlength

I'm not sure what the problem under Mozilla is, but it might deal with the Number object. I really don't understand the point of using it.

<script language="javascript">


function Count ( text, maxlength )
{
    if ( text.value.length > maxlength )
    {
         text.value = text.value.substring(0, maxlength);
         alert("Only " + maxlength + " chars");
    }
}
</script>

Re: TextBox.MultiLine maxlength

when I have HTML text area then this code won't work. I spent lots of time fighting for this problem then came up with getElementbyID does anyone have some other solution? thankx mp417

Re: TextBox.MultiLine maxlength

How are you calling it?

Re: TextBox.MultiLine maxlength

This is the code i think you may find usefull..Just pass the object to function from onkeydown as follows (onkeydown="javascript:checkLength(this);") and funtion will do the rest.It'll stop user entering any characters except del,backspace and arrraws to move left right and so on..

DONT FORGET to change the number (11000) with your Max characters value..

function checkLength(oObject)

{

if (oObject.value.length<11000)

return true;

else

{

if ((event.keyCode>=37 && event.keyCode<=40) || (event.keyCode==8) || (event.keyCode==46))

event.returnValue = true;

else

event.returnValue = false;

}

Re: TextBox.MultiLine maxlength

Interesting thread, but for arguments sake what if I had a mandate for AA compliance and as such was trying to avoid js script like the plague. Is there a way of preventing more than a certain number of characters being entered into a multi line text box in aspx?

(erm not only for the sake of argument :P )

Re: TextBox.MultiLine maxlength

Hi,

Setting the Maxength of a TextBox when it is in Multiline, You can use RegularExpressionValidator control as shown below

<asp:TextBox ID="txtConclusion" MaxLength="200" TextMode="MultiLine" Height="100px" Width="400px" runat="server" />
<asp:RegularExpressionValidator ID="txtConclusionValidator1" ControlToValidate="txtConclusion" Text="Exceeding 200 characters" ValidationExpression="^[\s\S]{0,200}$" runat="server" />

Re: TextBox.MultiLine maxlength

Hi thanks for that.

I am using requiredFieldValidator's on the rest of the page. The difference between what I was looking for and the validator is that, a validator is retro active. It produces an alert after the infraction as been comitted in this case forcing the user to reduce the number of charactures in the box. What i was hoping to do (without js) was to produce something that would stop a user from entering more than 200 charactures physcially into the text box in the first place, as you can do with a single line text box.

Sorry for not being clearer the first time round.

Re: TextBox.MultiLine maxlength

hi there,

the immediate solution for your problem wud be write a condition code for keypress event.

here we go

keypress event()

{

if (textbox1.textlength>200) //textbox controll name is assumed to be textbox1

{

textbox1.enabled = false;

messagebox.show("reached the limit");

}

}//keypressevent

kindly check out the syntax specially the event name i have just named it on my own.

This solution may have an impact on performance issue as this event will be triggered for every 200 key pressed.

Re: TextBox.MultiLine maxlength avoiding Javascript!

I know there are many ways to do it, but if you want to avoid javascript completely, i would suggest creating a new control. Visit the following link for an indepth explanation as well as sample code!

http://www.codeproject.com/useritems/Extended_ASPNET_TextBox.asp

Just in case if the page being offline or taken away, I am also posting a screenshot of the page.

Introduction

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 the code

<div class="smallText" id="premain0" style="width: 100%;"> Collapse</div>

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", ResolveClientUrl("~/textarea.js"));
                }
                this.Attributes.Add("onkeypress", "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:

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

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

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.

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 > control.attributes["maxLength"].value)
    {
        control.value = control.value.substring(0,control.attributes["maxLength"].value);
    }
};

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.

</div> <script src="http://www.codeproject.com/script/togglePre.js" type="text/javascript"></script>

About blogging developer

Blogging Developer is an accomplished project manager with more than 8 years of experience in web development, web strategy, e-commerce, and search engine optimization, specialized in object-oriented, multi-tiered design and analysis with hands-on experience in the complete life cycle of the implementation process including requirements analysis, prototyping, proof of concept, database design, interface implementation, testing, and maintenance.

Solid project management skills, expertise in leading and mentoring individuals to maximize levels of productivity, while forming cohesive team environments.

Click here to view blogging developer's online profile.

</div>

Re: TextBox.MultiLine maxlength

best way to do it is create / develop a user defined textbox controll with a new property called maxlength and i think you could solve your problem

Re: TextBox.MultiLine maxlength

Hello, vbsqlUser version is nice, but I added some additionnal property to get that works.

SetFocusOnError="true" EnableClientScript="true"

Like that when the user click on a runat server button, the button code isn't executed. Really interesting for what I need to do :)

Maybe it could helps someone else. It works on Firefox and IE very well.

Re: TextBox.MultiLine maxlength

Here is modified version of RealCodeMaster's code to make it work in both IE and Firefox...

function checkLength(e, oObject, maxLength)
        {
            if (oObject.value.length < maxLength)
                return true;
            else
            {
                var keyID = (window.event) ? event.keyCode : e.keyCode;
                if ((keyID>=37 && keyID<=40) || (keyID==8) || (keyID==46))
                {
                    if(window.event)
                        e.returnValue = true;
                }
                else
                {
                    if(window.event)
                        e.returnValue = false;
                    else
                        e.preventDefault();
                }
            }
        }

Happy programming.