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 - Inlcude 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
Posts
7 comments:
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.
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.
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.
v1.0.2 added. Plugin now updates the colour by adding CSS Class to the box on focus and removing it on blur.
Nice plug-in. Thanks. However it is affecting the asp:button on my page too. i.e. HTML Input type=submit.
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?
Post a Comment