So on occasion I dabble a bit with jQuery for front-end development and use it for simple things like hide, show toggle, etc etc but I’ve also seen some amazing things done with jQuery and MooTools. What’s more is that I’m constantly impressed with what people can do (including one of my work colleagues) with these libraries and often release their code to share with the community – truly amazing work that dwarfs my basic knowledge. However, that doesn’t mean I’m going to lax and not contribute, thus I’m release my very first jQuery plugin for placeholder text for text fields. I’m sure there are other plugins available which probably do a better job, are more flexible and much more optimised but im using this experience to better my knowledge on scripting and to broaden my skillset.
I’ve set up a demo page where you can see this in action, its fairly simple and easy to call so here’s the instructions:
HTML
Set up the html and set up your optional element which contains the placeholder text, be it a rel, title or whatever attribute like so:
<form action="" method="post" accept-charset="utf-8">
<fieldset>
<div>
<label for="name">name</label>
<input type="text" name="name" id="name" title="this is my name" />
</div>
<div>
<label for="email">email</label>
<input type="text" name="email" id="email" title="this is my email address" />
</div>
</fieldset>
</form>
Javascript
You then call the plugin for any desired selector like so:
$(form).placeholder();
That’s it! Tested in IE6/7+, FF2/3+, Safari 3, Chrome 1+
- uncompressed version 1.0k
- minified version 353b
This entry was posted on Monday, January 26th, 2009 at 4:08 pm and is filed under development, web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.