Highlight input using jQuery and Prototype

Highlight input using jQuery and Prototype

In Web design probably you have come accross in designing form for user input. Here is an example

E-mail Address :
Your password :

If we write something in the textbox, the background of the textbox does not change. But if it would change, then the user might feel different.

E-mail Address :
Your password :

Now if you move your mouse from one textbox to another do you see any difference from the previous scenario. How this has been done? It is very simple in the sense, I have just use "onfocus" and and "onblur" event for both textboxes.

    <fieldset>
        E-mail Address :
        <input type="text" onfocus="this.style.backgroundColor='#1155EE';" onblur="this.style.backgroundColor='#FFFFFF';" /><br />
        Your password :
        <input type="text" onfocus="this.style.backgroundColor='#1155EE';" onblur="this.style.backgroundColor='#FFFFFF';" /><br />
        <input type="button" value="Log in" />
    </fieldset>

Nowif we want to apply the principle for huge number of forms, it will be a repeatative jobs. A common javascript code for all forms can rescue us. I will try to show you how to do this using JQuery and Prototype javascript libray. At first JQuery

using jQuery E-mail Address :
Your password :

Using Prototype

Changing inline style E-mail Address :
Your password :
Changing class attribute E-mail Address :
Your password :

1 Responses to "Highlight input using jQuery and Prototype"

Leave a Reply