Restrict Textarea for not accepting 250 character

Question

I have a textarea in C#, please see below code:

<asp:Label ID="lblQuestions" runat="server" CssClass="addinfo">
                    Question & Comments</asp:Label>
<asp:TextBox ID="txtQuestions" Rows="5" Columns="5" TextMode="MultiLine" runat="server" MaxLength="250"></asp:TextBox>

Now I want that textarea should not accept more than 250 characters, whatever user do COPY & PASTE, by WRITING and DRAG & DROP etc, if user try to copy or drag & drop more than 250 character the first 250 characters should be copied in textarea. I know that there no MAXLENGTH attribute in TEXTAREA. If it is not possible with .NET the solution with javascript or Jquery will work.

Please help

Answer 1

You have to wire functions for the events

onpaste, onkeyup and onfocus of the area for which you want to do this action.

For an asp textbox I think you have to consider only OnTextChanged event.

For textarea

<INPUT id="counterMessage" readOnly size="3" value="250" name="counterMessage">                                                                                                     
<TEXTAREA onpaste="PasteCounter(this.form.txtAreaMessage,this.form.counterMessage,250);"
                                                                                                                            id="txtAreaMessage" onkeyup="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);"
                                                                                                                            style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 99%; BORDER-BOTTOM: 0px; HEIGHT: 95px; TEXT-ALIGN: justify"
                                                                                                                            onfocus="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);" name="txtAreaMessage"
                                                                                                                            rows="3" runat="server"></TEXTAREA>


function PasteCounter(field, countfield, maxlimit)
        {
            var len;
            var txt = clipboardData.getData("Text");
            txt = field.value + txt
            len = parseInt(txt.length);
            if ( len >  maxlimit )
            {
                event.returnValue=false;
                txt = txt.substring(0, maxlimit);       
                field.value = txt;                  
                alert("Only " + maxlimit + " characters are allowed");
            }
            countfield.value = maxlimit - txt.length;
        }    
        function textCounter(field, countfield, maxlimit)
        {
            if (field.value.length > maxlimit )
            {      
                field.value = field.value.substring(0, maxlimit );
                alert("Only " + maxlimit + " characters are allowed");
            }
            countfield.value = maxlimit - field.value.length;
        }

The countfield textbox is for showing remaining characters.

Answer 2

You can use jQuery to bind to multiple events at once

$("#txtQuestions").bind("keyup change blur input paste", function() {
  // fire this off a few ms after the event happens
  setTimeout(
   (function(el){ // closure to store "this" as "el"
     return function() { if (el.value.length>250) el.value.length = 250; }
   })(this), 10);
});

There is a library (jQuery.charcounter) out there that will automatically add the characters remaining and what not to the DOM as well.

Answer 3

You can do this with an ASP.NET validator as well:

<asp:TextBox ID="MyTextBox" runat="server" TextMode="MultiLine" Rows="4" />
<asp:RegularExpressionValidator Display="Dynamic" ID="RegularExpressionValidator1" ControlToValidate="MyTextBox" Text="<p>A maxiumum of 250 characters is allowed.</p>"  runat="server" ValidationExpression="^(.|\s){0,250}$" />