Recently I was
developing a webform (asp.net) where the user could submit his
feedback, and one of the requirements was that the user should not
enter more than a set number of characters in his message, so I thought
it would be real nice for the end user to know how many more characters
he still can type until the maximum limit is reached.
In order
to allow that functionality, I created a asp.net multiline textbox for
text input and an html readonly text field (for displaying number of
characters until the maximum).
Then, I created a Javascript
function and called it every time the contents of the multiline textbox
changed (onKeyUp and onChange events).
Below is the code:
<html>
<head>
<script language="JavaScript">
function CountChars(text,long)
{
var maxlength = new Number(long);
var myLength = text.value.length;
document.forms[0].Counter.value = maxlength - myLength;
if (myLength > maxlength) {
text.value = text.value.substring(0,maxlength);
}
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:Textbox mode="multiline" id="txtMessage" runat="server" /><br />
<input type="text" name="Counter" readonly="readonly" />
</form>
</body>
</html>
Protected Sub Page_Load(
ByVal sender
As Object,
ByVal e
As System.EventArgs) Handles
Me.Load
Util.SetTextBoxProperties(txtMessage,
True)
End SubBelow is the SetTextBoxProperties method, which actually did the work:
Public Sub SetTextBoxProperties(
ByVal txt
As TextBox)
txt.Attributes.Add("onKeyUp", "CountChars(this," & txt.MaxLength & ")")
txt.Attributes.Add("onChange", "CountChars(this," & txt.MaxLength & ")") End Sub