JQuery plugin : onFocus/onblur INPUT text/password color change

This is a small JQuery plugin which will make every single text and password box on the page change color when it gains or loses focus.

I wrote this so i could just include the plugin rather than using the standard js way of adding a onFocus+onBlur event to every input box on a page.

When a input gains focus a CSS class called "highLightInput" is added to it and when it loses focus (blurs) this class is removed.

Download

jquery.textinput.focus.colorise.zip

Demo

Usage

1. Download/Extract JQuery
2. Download/Extract our plugin
3. Include jquery and the plugin in your page with;

   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript" src="jquery.textinput.focus.colorise.js"></script>
   

4. Setup a CSS class called "highLightInput" which the text box will be set to on focus. e.g. ;

   .highLightInput {
       background-color: #FCFFC5 ! important;
       background-image: none ! important;
   }
   

License

LGPL

Donate

Here is a paypal link for if you find this useful and would like to buy me a drink!

Change Log

• v1.0.2 - 05/09/09 - Update the style change method to a CSS Class based change.
• v1.0.1 - 27/07/09 - Update to fix the loss of custom backgrounds on the onblur event.
• v1.0 - First Version

jQuery Plugins Project Page

Text Input Focus Colorise