Form Highlighter

A simple jQuery Plugin, used to scan through your website and automaticly attach focus,blur and keydown effect on your form fields. By using FormHighlighter plugin you will be able to control all your form fields from one place.

Download

Demo

Get started

Installing Form Highlighter plugin is more about styling your forms with CSS. When you get the styling right all you need to to do is to point Form Highlighter at your forms.

$(document).formHighlighter();

This will make Form Highlighter go through all your form fields and apply the inner lable effect without any styling.

Click here to see more demos and examples

Options

Form Highlighter comes with some advanced options that will make your forms more uniqe and flexible at same time. For example you can call your own custom functions after each Blur and Focus event plus much more.

classFocus: ' Css Class Name '
classBlur: ' Css Class Name '
classKeyDown: ' Css Class Name '
classNotEqualToDefault: ' Css Class Name '
clearField:' true/false '
onBlur: ' transition callback '

onFocus: ' transition callback '

Form Highlighter for designerS

Form Highlighter is very designer friendly. Your form fields can have 4 stages.

Blur - Main style of your fields.

Focus - The style that will be active when used clicks on the form field.

Keypress - When user start to type something inside your form fields

NotEqualToDefault - When user has filled out a formfield with content that is not the same as the default lable eg. "Type your name here"

So as designer all you need to do is to make 4 CSS classes. One for each event you need.

Form Highlighter for developers

When your designer comes with a layout and some demands on how the form should look like or act like, just put a big smile on your face and say " Yes, it can be done ". Form Highlighter is very flexible and will make your day good in 5 min ;)
Here is a quick example in how you gonna make a 4 CSS classes swich.

$("div#FormContainer").formHighlighter(
    {
        classFocus: 'focus',
        classBlur: 'blur',
        classKeyDown: 'keydown',
        classNotEqualToDefault: 'notEqualToDefault'
    });
This call will toggle between all 4 CSS Class: Blur, Focus, Keypress and NotEqualToDefault.

Changelog

Version 2.0.3

26-11-2011 : New and better version of Form Highlighter. Everything has been rewritten and the plugin is now 10 times faster then 1.3
26-11-2011 : HTML5 input type support ( email, url, number, range, date picker, search and color )
26-11-2011 : HTML5 Placeholder support. If you set clearField: true, then Form Highlighter will add a html5 placeholder attribute, if users browser supports it, or else it will add a fallback effect.
26-11-2011 : Bugfix - multi password field is now supported. It was one silly bug.
26-11-2011 : Bugfix - your custom ID and CLASS value won't be removed on Focus event.
26-11-2011 : Bugfix - I've changed the way the Form Highlighter was handling password fields, so that web-kit browsers didn't add 2 key values on first keydown event.

Version 1.3

24-05-2010 : Implemented the function call after each event. This gives your option to call your own functions through Form Highlighter.
24-05-2010 : Implemented the new NotEqualToDefault class call, that isactive after user have typed something inside the form fields.
24-05-2010 : Removed the default HTML colors, since it was pointless when you can use CSS classes.

Version 1.2.2

05-01-2010 : Minor bug fix. The password filed had some issues with IE7, but now thay are all good friends.

Version 1.2.1

02-12-2009 : IE and Opera bugfix – Wrong input on first character while using numlock on password fields.
02-12-2009 : The plugin filename is now corrected to jquery.formHighlighter.js so pay attention when you update :)

Version 1.2

23-10-2009 : Optimized sorce code for better input scanning.
23-10-2009 : Now includes text label for password fields.
23-10-2009 : Automatically sats autocomplet=”off” on all password fields.
23-10-2009 : Hidden field bug is now fixed.

Version 1.1

15-10-2009 : CSS class issue is now fixed. During the change between Focus and Keydown, the Focus class will be removed.
15-10-2009 : When clicked on a field the “pointer” will place it self at the begining of the field.
15-10-2009 : Optimized source code for better performance.

Version 1.0

Initial Release