Limit Textarea in order to not accept 250 characters

Question

I have a text box in C #, 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 textarea not to accept more than 250 characters, no matter which user does COPY and PASTE, through WRITING and DRAG and DROP, etc., if the user tries to copy or drag more than 250 characters, the first 250 characters should be copied to textarea. I know that in TEXTAREA there is no MAXLENGTH attribute. If this is not possible with .NET, then the solution will work with javascript or jQuery.

Please, help

Answer 1

You need to connect functions for events

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

For an asp text box, I think you only need to consider the 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 text box displays the 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) that will automatically add the remaining characters, and also not to the DOM.

Answer 3

You can do this using the ASP.NET validator:

 <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}$" /> 

Answer 4

1) A very simple way to handle this is to start with the onChange event:

 <textarea id="yourTextArea" onchange="this.value.length = Math.min(this.value.length, 250)"></textarea> 

The main drawback here is that the text field will not be updated until the focus leaves the text field.

2) You should be able to adapt the above example to the form validation function that runs in the form of the onSubmit event.

 <script type="text/javascript"> document.forms[0].onsubmit = function() { document.getElementById("yourTextArea").value.length = Math.min(this.value.length, 250); } </script> 

3) If you want to perform this check on the server side, you just need to get the value of textarea and truncate it.

 string validText = yourTextArea.Value.Substring(0, 250); 

Answer 5

@Gnarf answer extension:

 <textarea class="max-length" cols="30" id="comment-box" maxlength="250" rows="10"></textarea></span> <span id="comment-box-chars-left">250</span> characters left <script type="text/javascript> function updateCharsLeft(id, maxChars, length) { $('#' + id + '-chars-left').html(maxChars - length); } $(document).ready(function() { $('.max-length').each(function() { updateCharsLeft($(this).attr('id'), $(this).attr('maxLength'), $(this).val().length); }); $('.max-length').bind('keyup change blur input paste', function() { var maxChars = $(this).attr('maxLength'); // 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 > maxChars) { el.value = el.value.substring(0, maxChars); } updateCharsLeft(el.id, maxChars, el.value.length); } })(this), 10); }); }); </script> 

An attribute is used here to indicate the maximum number of characters and update the label displaying the number of remaining characters. The maximum length of the class should be indicated in the text area, and the element that displays the number of remaining characters should have the same identifier as the corresponding text area with the left left attached to it.

Answer 6

For interactive feedback, you must do this in javascript, as the wired controls will not respond until they are sent back to the server (requiring a page reload). This can cause some server load if you update the number of characters each time you press a key.

Below is a rough implementation of js that simply counts the number of ASCII characters for each change. This will also work if the text field is resized due to cut and paste:

 <script type="text/javascript"> function countWords() { var text = document.getElementById("txtBox1").value; if (text.length > 250) text = text.substr(0,250); document.getElementById("txtBox1").value = text; } </script> <textarea id="txtBox1" onkeyup="countWords();" >text here</textarea> 

Answer 7

 <asp:TextBox onkeypress="return value.length<=10;" onpaste="return (value.length+clipboardData.getData('Text').length)<=10" TextMode="MultiLine" runat="server" />