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.SetTextBoxPropertiesFull(txtMessage, True)
End Sub
and then, in the SetTextBoxPropertiesFull method I had the following two lines of code that did the work:
txt.Attributes.Add("onKeyUp", "CountChars(this," & txt.MaxLength & ")")
txt.Attributes.Add("onChange", "CountChars(this," & txt.MaxLength & ")")
Another handy code snippet is as follows:
txt.Attributes.Add("onfocus", "this.className='myStyle1'")
txt.Attributes.Add("onblur", "this.className='myStyle2'")
where myStyle1 and myStyle2 are names of css classes defined in the stylesheet.
