Changing Form Input (Textbox) Style on Focus using jQuery

form-element-style-javascript-textboxUser experience has always been a factor to be consider while you design a website. Lot of fields such as Human Computer Interface (HCI) and Usability etc have been studied upon. While designing a user interface, special care should always been taken while placing the text fields and selecting fonts. While lot of web designers prefer to display forms in plain vanilla manner, lot of others prefer to give user as much help while filling the forms. Thus the html forms should always have description field with each input field. Also if we can highlight the field that user is filling, it can improve the user experience. Thus How can we implement the feature where the Input fields which are currently focused are highlighted? Let us use jQuery and create a simple feature on a HTML Form.

Step 1: The HTML Code

We will use following form as a sample HTML Form and apply the Focus effect using jQuery.
<FORM id="sample"> <TABLE> <TR> <TD>Name </TD> <TD><INPUT type="text"/></TD> </TR> <TR> <TD>Age</TD> <TD><INPUT type="text"/></TD> </TR> <TR> <TD>Phone no.</TD> <TD><INPUT type="text"/></TD> </TR> </TABLE> </FORM>
Code language: HTML, XML (xml)

Step 2: The CSS Stylesheet

We will use a simple style class to apply to the focused field.
.focus { border: 2px solid #AA88FF; background-color: #FFEEAA; }
Code language: CSS (css)

Step 3: Add the effect using jQuery

We will use jQuery to add effect to the form elements. Two events has to be taken care of. While the input field is focused and while the focus is moved to next textbox (blured).
$('input[type="text"]').focus(function() { $(this).addClass("focus"); }); $('input[type="text"]').blur(function() { $(this).removeClass("focus"); });
Code language: JavaScript (javascript)

Online Demo

View Demo
Get our Articles via Email. Enter your email address.

You may also like...

5 Comments

  1. yogesh says:

    i want to use focus option directly on textbox without using function how want i do this
    somebody help

    • HifzurRahman says:

      @yogesh ,using css you can do it..

      #txt:focus {backgrounf-color:red}

      try it

      • Lara says:

        working

  2. Oscar Quintero says:

    Gracias era justo lo que estaba buscando!!!!

  3. Amin Ghaderi says:

    this work doing also with code:
    $(“input”).css(“background”,”red”);
    smaller and More understandable.

    thank .

Leave a Reply

Your email address will not be published. Required fields are marked *