Home Asp.net Change Textbox Background Color on Focus or Blur in Asp.net

Change Textbox Background Color on Focus or Blur in Asp.net

46
0
Change Textbox Background Color on Focus or Blur in Asp.net
Change Textbox Background Color on Focus or Blur in Asp.net

Now, here in this tutorial, I’ll explain how to change the textbox background color on focus or blur jQuery event in Asp.net. In this example, I’ve used jQuery focus event to apply a background color to asp.net textbox control and blur event will remove applied background color.

You can also check out my previous tutorials where I’d explained most popular jQuery fading effects, jQuery fade-in and fade-out effect using css3 transition, export gridview data to word excel text pdf, and other more amazing tutorials on JavaScript here.

To change the textbox background color on focus or blur jquery events, we need to write the following simple jquery script.

Change Background Color for Asp.net TextBox Control in jQuery

<script type="text/javascript">
    //jQuery on focus method for Asp.net control
    $('#txtTextbox').focus(function () {
        $(this).addClass("txtFocus");
    });

    //jQuery on blur method for Asp.net control
    $('#txtTextbox').blur(function () {
        $(this).removeClass("txtFocus");
    });
</script>

Likewise you can also use same for html input control as below:

Change Background Color for HTML input Control in jQuery

<script type="text/javascript">
    //jQuery on focus method for HTML input
    $('input[type="text"]').focus(function () {
        $(this).addClass("txtFocus");
    });//jQuery on blur method for HTML input
    $('input[type="text"]').blur(function () {
        $(this).removeClass("txtFocus");
    });
</script>

As you can see in above sample script, we’ve used focus and blur event to add or remove the color class. It’ll help us to apply or remove the background color of input control.

Change Textbox Background Color on Focus or Blur in Asp.net

Following is the complete HTML markup code that I used for the demostration to change the textbox background color on focus or blur in asp.net:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Change Textbox Background Color on Focus or Blur in Asp.net</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            //jQuery on focus method for HTML input
            $('input[type="text"]').focus(function () {
                $(this).addClass("txtFocus");
            });

            //jQuery on blur method for HTML input
            $('input[type="text"]').blur(function () {
                $(this).removeClass("txtFocus");
            });

            //jQuery on focus method for Asp.net control
            $('#txtTextbox').focus(function () {
                $(this).addClass("txtFocus");
            });

            //jQuery on blur method for Asp.net control
            $('#txtTextbox').blur(function () {
                $(this).removeClass("txtFocus");
            });
        });
</script>
    <style type="text/css">
        .txtFocus {
            border: 1px solid #fefefe;
            background-color: #e5e5e5;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h4>jQuery on focus and blur textbox change color example</h4>
        <table>
            <tr>
                <td>To test jQuery "focus" event, click on any of the textbox and 
                    click outside textbox to test "blur" event
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>HTML input example:<input type="text" id="txtInput" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Asp.net textbox example:<asp:TextBox ID="txtTextbox" runat="server"
                    ClientIDMode="Static" /></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Note: You can notice that I used ClientIDMode=”Static” for Asp.net TextBox control that will help us to access that control by its actual name instead of dynamic generated control name. So we can access it in jQuery to perform client-side operations.

Example Result

Change Textbox Background Color on Focus or Blur in Asp.net
Change Textbox Background Color on Focus or Blur in Asp.net

Download Example Code

Git Repo

That’s it, by using this way you can change textbox background color onFocus or onBlur event in jQuery using Asp.net web page.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy coding!

Previous articleEnable or Disable Asp.net TextBox on Button Click Event in jQuery
Next articleHow to Bind GridView using ExecuteReader in Asp.net C# Vb?
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

2 × one =