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.

image

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.

image

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.

image

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>

Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.