JavaScript: Form Field Focus

Introduction

Author: Martin Warning
Year: 2007
License: Free

This is just a simple JavaScript code to change the background color of an form input field at the moment the user selects it. We use two JavaScript events where first we use the onfocus event to change the background color and then use the onblur event to change the format to the original color. The onblur color will need to be the same as defined in the CSS background for the <input /> element.

Code

Languages: The following code is an example field focus on page load: 
<form name="frmSearch">
	<input type="text" name="strSearch"
	  onfocus="document.frmSearch.strSearch.style.backgroundColor='#ffffff';"
	  onblur="document.frmSearch.strSearch.style.backgroundColor='#eeeeee':" style="background-color:#eeeeee;" />
</form>

We use the following format to give focus to the field. First we go to the document.formname.fieldname to identify this input element as the one needing to be modified and then we use style.backgroundColor to change the background color of the field.

Example: See it in action

Printed from: http://flyinglowlander.com/ (5/20/2012)
© FlyingLowander.com 2006 - 2012

Visit http://flyinglowlander.com for more XHTML, CSS, ASP and JavaScript examples, templates and tutorials.