mike enriquez

Mac/iOS/Web Developer

Technical stuff

jQuery plugin EZPZ Hint

A simple jQuery plugin for showing a text field’s label inside the textbox itself. The hint disappears when it is given focus, and appears again if the inputted text is empty. Typically used for search and login forms.

This plugin works in all modern browsers, and it even works with password field hints.

Check out the demo here.


How it works

The hint text is taken from the title attribute of the input. Sorry, no graceful degradation. Disabled javascript users will see a bunch of unlabeled text boxes. A future version will use a label tag to get the hint text.

Since IE doesn’t allow a password field to be changed into a text field, a dummy text field is dynamically created to hold the hint text. The dummy input and real input swap visibility on focus and blur to give the illusion that the hint text is appearing and disappearing. The only problem with this technique is that the dummy text field is not a direct copy of the real text field. The plugin only copies over the class and size attributes

This plugin disables the remember password feature of most browsers by setting autocomplete to “off”. The text hint gets confused with it on, and the browser actually remembers the dummy inputs instead of the real inputs. This can be fixed in the future to move all the dummy inputs to the top of the form, and the replacement would have to be done by absolutely positioning the dummys over the real text fields (that’s the theory anyway, I don’t know if it would work).


As always, the code is available on GitHub. It can also be downloaded below.