in

ASP.NET Weblogs

Gregory Rubinstein

April 2008 - Posts

  • Remaining Characters Counter

    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

    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

           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.

More Posts