Remaining Characters Counter

grigorythegreat — Fri, 11 Apr 2008 02:06:00 GMT

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 Sub

Below 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

Active Control Marker

grigorythegreat — Thu, 10 Apr 2008 04:07:00 GMT

Today, while working on my project, I recalled that some of the data entry pages in my project have a lot of textboxes, which may confuse the end-user once he starts entering information. My idea was to make the textbox that has focus visually different from the rest, so I came up with the following code snippet, that does the actual work:

Public Sub ShowActiveTextbox(ByVal txt As TextBox)

txt.Attributes.Add("onfocus", "this.className='class1'")
txt.Attributes.Add("onblur", "this.className='class2'")

End Sub

This code would work just fine if I had only one or two Textboxes on my page. However, some of the pages may contain a dozen of those textboxes, so I came up with another useful method:

Public Sub ShowActiveTextbox(ByVal col As ControlCollection)

For Each Ctl As Control In col

If Ctl.GetType().Name = "Textbox" Then

Call ShowActiveTextbox(Ctl)

Else

'Handle TextBoxes contained in container controls, such as panel
If ctl.Controls.Count > 0 Then

Call ShowActiveTextBox(ctl.Controls)

End If

Next
End Sub

Now we have a method that will handle any number of controls on a specific page and will apply the onFocus and onBlur event handlers to all Textboxes on that page.

Gregory Rubinstein : utility functions

Remaining Characters Counter

Active Control Marker