Highlighting The Current Input Element Using JQuery

Sapna
12y
8.7k
0
0

Article

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 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 3: In this step you have to add a style sheet code which is given below:

Code:

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

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 6: In this step you will see the jQuery code which will be enclosed between the <script></script> tag

jQuery Code:

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>                

                <input name="Name" type="text"/>
        </div>
        <div>
                <label for="Email"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Email:
                    </label>                 
                <input name="Email" type="text"/>
        </div>
        <div>
                <label for="Pwd"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Password:
                    </label>        
                <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
        </div>
        <div>
                <label for="Email"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Email:
                    </label>                 
                <input name="Email" type="text"/>
        </div>
        <div>
                <label for="Pwd"
                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Password:
                    </label>        
                <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 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.

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

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

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

Here are some resources which may help you:

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all