JQuery-Focus

Now what comes to your mind when you hear the word Focus?? Some might say that it is got to do with directing our attention towards something. That’s fair enough. And you might be knowing that there was a film released last year with the same Name starring Will Smith!

Focus has go relevance not only in Hollywood or the Oxford Dictionary but also in JQuery as well.

Have you ever observed that while filling out a form, the input field gets highlighted once you place a cursor on it?? Looks appealing right? This is done with a mix of JQuery and CSS. And let me tell you that the code behind it is not too difficult at all.

We first use the “focus” action of JQuery in order to direct our attention to the fields of the form. And then we apply the css action of JQuery in order to add a color to it. Sound’s simple right?

The code would appear to be something like this-

$(document).ready(function(){

$(‘input’).focus(function(){

$(‘input’).css(‘outline-color’,’red’);

});

});

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s