Changing Form Input (Textbox) Style on Focus using jQuery

User 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