Highlighting The Current Input Element Using JQuery

Introduction

In this article we will explore how to highlight the current input element using jQuery. In further details we will see that whenever we click on the textbox element to write something then it will highlight it with applying a CSS color. In this article, highlighting means to look different when we perform some task on the input element. Here we will use some CSS style which will make it very effective and blossom. In this article we are taking some input element such as a lable and a text element which will be highlighted. Now you will care that a CSS property named background which is very typical and which will be run on the latest browser such as for Google Chrome, not for older browsers. Now to apply such a functionality you have to follow the steps which is given below:

Step 1: In this step you have to open a new website; let's see the figure from where you have to add the website.

  • File-->New-->Website
  • Select a ASP.NET website
  • Click OK.
Step_1fig.gif

Step 2: In this step you have to add a new web form; let's see in the figure from where you have to add it.

  • Go to Solution Explorer
  • Right click on the add new item
  • Select new web page
  • Give it a name whatever you want
  • Click OK.
Step_2_1fig.gif

Step_2_2fig.gif

Step 3: In this step you have to add a style sheet code which is given below:

Code:

Step3_fig.gif

Step 4: In this step you have to see from where you will add the jScript reference which is given in the figure:

Step_4fig.gif

Step 5: Let's see the jScript reference code which will be either in Head section or can be placed inside the body section:

Step_5_fig.gif

Step 6: In this step you will see the jQuery code which will be enclosed between the <script></script> tag

jQuery Code:

Step_6_fig.gif

Step 7: In this step we will see the Body code for the Default2.aspx page design which is given below:

Body Code:


<
body>
    <form runat="server">
        <div id="div1" style="font-family: 'Comic Sans MS'; font-size: x-large; color: #FFFF00; background-color: #000000">
                Highlighing the current input element using jQuery
        </div>
        <div>
                <label for="Name"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Name:
                    </label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <input name="Name" type="text"/>
        </div>
        <div>
                <label for="Email"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Email:
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="Email" type="text"/>
        </div>
        <div>
                <label for="Pwd"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Password:
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="Password" type="text"/>
        </div
>
</form>
</
body>

Step 8: In this step we will see the complete code for the Default2.aspx page which is given below:

Code:

<%
@
Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!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>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input").focus(function () {
                $(this)
                    .parent()
                    .addClass("curFocus input")
                    .children("div")
                    .toggle();
            });
            $("input").blur(function () {
                $(this)
                    .parent()
                    .removeClass("curFocus input")
                    .children("div")
                    .toggle();
            });
        });
</script>
<
style
type="text/css">
    div.curFocus
   {
     background: -webkit-gradient
     (linear, left top, left bottom, color-stop(0%,#b7deed),
     color-stop(50%,#71ceef),
     color-stop(51%,#21b4e2),
     color-stop(100%,#b7deed));
   }
   div.input
   {
       border:5px groove yellow;
   }
   #div1
   {
       background: -webkit-gradient
       (linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)),
       color-stop(50%,rgba(140,51,16,1)),
       color-stop(51%,rgba(117,34,1,1)),
       color-stop(100%,rgba(191,110,78,1)));
   </style
>
</head>
<
body>
    <form runat="server">
        <div id="div1" style="font-family: 'Comic Sans MS'; font-size: x-large; color: #FFFF00; background-color: #000000">
                Highlighing the current input element using jQuery
        </div>
        <div>
                <label for="Name"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Name:
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
        </div>
        <div>
                <label for="Email"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Email:
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="Email" type="text"/>
        </div>
        <div>
                <label for="Pwd"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Password:
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="Password" type="text"/>
        </div
>
</form>
</
body>
</
html>

Step 9: In this step we will see the design of the Default2.aspx  page let see the figure which is given below:

Step_9fig.gif

Step 10: At last you have to need to run the website by pressing F5 and the related output is given below:

Output 1: This is the default output whenever you run the Default2.aspx page.

Output1.gif

Output 2: In this output we will see that whenever we will go to write inside the first textbox then it will be highlighted.

output2.gif

Output 3: In this output we will see that whenever we will go to write inside the second textbox then it will be highlighted.

output3.gif

Output 4: In this output we will see that whenever we will go to write inside the third textbox then it will be highlighted.

output4.gif

Here are some resources which may help you:

Up Next
    Ebook Download
    View all
    Learn
    View all