TextBox and Textarea Style Change on Focus using jQuery

In this tips I will discuss how you can use jQuery to change the style of asp.net textbox control when they got focus. In my previous tip I have discussed about how we can change the textbox style based on the dropdownlist selection change, where I used JSON to change the style of textbox control. In this post, I will show how we can override the Class to change the style.

To demonstrate this, let’s consider we have two CSS Class, one is default and another is getting applied using jQuery on focus event of text box. below is the code snippet for the same.

In the above code $(“:text”) returns all the jQuery object which are input type=”text” and and $(“textarea”) returns jQuery object of textarea. Reason for using Textarea over here is, Comments Text box is a multiline textbox and all multiple ASP.NET Textbox controls renders into textarea. control.focus() event will fire whenever there is a focus on the control either by keypress and mouse.

Instead of addClass and removeClass you can also use .Css() change the style along with JSON format.

Below is the complete code block

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contacts.aspx.cs" Inherits="Contacts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .textboxClass
        {
            border: 1px;
            border-color: #6E6E6E;
            border-style: solid;
            background-color: #ffffff;
        }
        
        .textboxstyleClass
        {
            border: 1px;
            border-color: #C73E2C;
            border-style: solid;
            background-color: #D9D9D9;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var textboxes = $(":text");
            var textareas = $("textarea");
               $(":text").focus(function () {
                textboxes.removeClass("textboxstyleClass");
                textareas.removeClass("textboxstyleClass");
                $(this).addClass("textboxstyleClass");
            });

            $("textarea").focus(function () {
                textboxes.removeClass("textboxstyleClass");
                $(this).addClass("textboxstyleClass");


            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="2" cellspacing="2">
            <tr>
                <td colspan="2">
                    Contact Form
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" ID="textName" />
                </td>
            </tr>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" ID="textEmail" />
                </td>
            </tr>
            <tr>
                <td>
                    Web Site
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" ID="textWebSite" />
                </td>
            </tr>
            <tr>
                <td>
                    Comments
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" TextMode="MultiLine" ID="textComments" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button Text="Submit" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>