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>

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;
}

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");
});

Online Demo


View Demo



Tags: ,

5 Comments

  • yogesh 8 April, 2010, 11:57

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

    • HifzurRahman 9 November, 2012, 12:25

      @yogesh ,using css you can do it..

      #txt:focus {backgrounf-color:red}

      try it

  • Oscar Quintero 1 May, 2013, 3:33

    Gracias era justo lo que estaba buscando!!!!

  • Amin Ghaderi 17 September, 2013, 15:06

    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 *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current day month ye@r *