jquery.labelify

jquery.labelify copied to clipboard

labelify: a jQuery plugin to add labels to your textboxes

This is a text-only adaptation from http://www.kryogenix.org/days/2008/06/25/labelify-add-labels-to-textboxes-with-jquery

A fairly common design pattern in web forms is to have some explanatory help text for a textfield appear inside the text field, and then remove it when the user clicks into that field. It has the benefit of putting the help precisely where the user's looking.

jquery.labelify.js is a jQuery plugin to add labels to your input fields.

How to use the plugin

1. Since this is a jQuery plugin, it requires jQuery itself. You can
   either download jQuery and make it part of your project, or for
   simplicitly just use the Google edge-cached version by adding this
   to your HTML:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

2. Next, download jquery.labelify.js and add it to your project with

   <script type="text/javascript" src="jquery.labelify.js"></script>

3. You need to specify which text fields you want to have labels. By
   default, the plugin uses the title attribute of the input text
   field as the label. So change your text fields from

   <input type="text" name="whatever">
     to
   <input type="text" name="whatever" title="Help text goes here">

4. Finally, you need to tell the plugin to labelify your fields:

   <script type="text/javascript">
     $(document).ready(function(){
       $(":text").labelify();
     });
   </script>

   You can of course add this to your existing document-ready code
   block.

What if I don't want to use the title attribute as the text source?

The plugin is customisable. When you call labelify, you can pass an options object. To change the source of the text that's used to add a label to your input box, pass a different value for text:

$("input").labelify({
  text: "label"
});

The value "label" for text will fetch the input's "tooltip" from that input's associated label:

$("input").labelify({ text: "label" });
...
<label for="myinput">Your favourite colour</label>
<input id="myinput" type="text">

Note that this does not remove the text from the label itself; if you want that to happen then you can hide it in CSS.

If "label" isn't what you want either, then you can pass a function as text. The function is called with your input field as a parameter and can use that to return whatever it likes:

$("input").labelify({ text: function(input) { return "kryogenix.org"; } });
...
<input type="text">

How can I make the label look different?

You'll note that in the examples on this page, user-entered text in the boxes is black but the label that's added is a light grey. To do this, pass another parameter in the options list, labelledClass. This will set class="labelledClass" on the input box when it contains the help text label, and remove that class when the input box contains user input.

$("input").labelify({ labelledClass: "labelHighlight" });
...
<style type="text/css">
input.labelHighlight { color: red; }
</style>
...
<input name="someinput" type="text" title="Helpful text">

Why should I use this labelify script?

Lots of people, as noted above, have written scripts that do this. You might want to use this one for the following reasons...

1. It copes with users who fill in some text while the page is still
   loading, and doesn't overwrite their entry with the label once the
   page is loaded

2. It can be customised to pick up your input box label text from
   wherever you want; it's not hardcoded to use a <label> element, or
   the title attribute, or any similar thing

3. It caters for browsers "remembering" the values in a field

Why might I not want to use it?

1. It's a jQuery plugin. If you're not already using jQuery in your
   project, then I wouldn't pull it in just for this. On the other
   hand, if you're doing any DOM scripting then you'll almost
   certainly find jQuery useful; it's the best JavaScript library out
   there.

2. Perhaps you like pain. I don't know.

-- Stuart Langridge, June 2008