JavaScript Utility Methods for Multiline ASP.NET TextBoxes
12/26/2007 11:02:14 PM
I find it odd that the ASP:TextBox doesn't pay attention to MaxLength attribute when your textbox is multiline. I created some very simple utility functions to help with this. Some of you might find it useful.
<strong>Reason:</strong> <asp:RequiredFieldValidator ID="requiredReason" ControlToValidate="textReason" ErrorMessage="*" runat="server" /><br />
<asp:TextBox ID="textReason" TextMode="multiline" Height="70" Width="200" MaxLength="200" runat="server" onkeyup="displayLengthCount(textReason', 'displayLengthCount')" onchange="restrictLength(200, textReason', submitRequestTimeOff')" /><br />
<label id="displayLengthCount">0</label> of 200 available
<p><asp:Button ID="submitRequestTimeOff" Text="Request Selected Date" runat="server" OnClick="SubmitClick" /></p>
This is an example of what I would have in my .aspx page. Very simple example of having to type in a reason for requesting time off. Notice how I have the 200 as my MaxLength. You don't even need that as it will be disregarded when the rubber meets the road.
Here is the javascript that I am using. Two very simple methods.
function
restrictLength(length, elementIdText, elementIdSubmit)
{
if (document.getElementById(elementIdText).value.length > length)
{
alert("This field has a maximum length of " + length + ". Please truncate");
document.getElementById(elementIdSubmit).disabled = true;
}
else
document.getElementById(elementIdSubmit).disabled = false;
}
function
displayLengthCount(elementIdText, elementIdDisplay)
{
document.getElementById(elementIdDisplay).innerHTML = document.getElementById(elementIdText).value.length;
}
The first utility function (restrictLength) takes the length (what you deem as MaxLength), the textbox / control to validate, and the button that submits the form (to enable / disable accordingly). In my example I call this on the onchange event but you can just as easily switch to the onblur as they are both pretty similar. For those of you that don't know, the onchange fires when the contents of the textbox has changed. The onblur event fires when the object loses input focus. I say they are both similar because the onchange events action of analyzing the input is initiated after changing the selection aka losing input focus.
After you type your text the method is called and the input is analyzed. If the input is valid, nothing happens! If the input is invalid, the user gets an alertbox telling them so and the button that submits that form data is disabled and will remain disabled until the data is truncated.
The second and last utility function simply gives the end-user a visual representation of how many characters they have left in the current input field. Very easy to understand and I don't know why I didn't think of this sooner.
I am going to insert an animated demo here as soon as I figure out why it won't record. Until then, have fun with this.
Also, I probably should've disabled the submit button as soon as the input length reached 201 but I figure for fun I should allow the user to type a long-winded novel only to have to backspace a lot or select-all, delete, and start all over.
UPDATE
JavaScript
