Linux Support, Hosting & Security Hertfordshire

Wednesday, 1 July 2009

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

Did this post help you? Thank us with bitcoin;

7 comments:

  1. Works well. It would be better if more transition effects could be added to the textboxes. Further, losing focus on the textboxes leave the border of the textboxes some deep colored instead of original bare single line border.
    Thanks.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thanks for the feedback. Effects would be a nice thing to add in a further release and ill note that down.

    I'll look into the border issue and report back here.

    ReplyDelete
  4. v1.01 added which fixes the border issue identified by "Sangam Uprety".

    The script will now revert the onblur background style to whatever it was when the onfocus event was called.

    ReplyDelete
  5. v1.0.2 added. Plugin now updates the colour by adding CSS Class to the box on focus and removing it on blur.

    ReplyDelete
  6. Nice plug-in. Thanks. However it is affecting the asp:button on my page too. i.e. HTML Input type=submit.

    ReplyDelete
  7. re : tentonipete

    Thanks tentonipete. I cant think of any reason it should do that. The jQuery selector the plugin uses is;

    "input:[type=text], input:[type=password]"

    Is there any further info or examples you can send my way to help me pin that down for you?

    ReplyDelete