Devthought

As I release my latest MooTools plugin, PlaceholderInput, that adds support for input placeholders, I decided to explain my solution, and what others are available.

An example of my implementation is seen on the Devthought sidebar, right next to this post. I’ll analyze next the different solutions that have been offered for this problem, and the upsides and downsides each has.

Solution #1: background-image

Upon the focus and blur events of the input, a background with the placeholder text is toggled.

Advantages

• The placeholder text is never submitted with the form

Disadvantages

• A change in the text, font, style or size means re-exporting the image
• The font rendering of the image and the actual text the user type will likely differ
• It becomes harder to support internationalization

Solution #2: overlapped element

A label or span element is positioned on top of the input. When the element is clicked, or the element is given focus, it disappears and the user can type normally.

Advantages

• The placeholder text is never submitted with the form
• Easy to change or translate the placeholder value, just by altering the markup

Disadvantages

• It’s very hard to position the text perfectly, in a cross browser fashion. Inputs should be padding less and border less to calculate the position perfectly, and styling becomes a problem.

I’ve seen this method in the new Yahoo! Mail interface search input. I tested with a couple of browsers and some displayed the text with a considerable offset, which depicts the aforementioned disadvantage.

Solution #3: altering the value

This is the most common solution, and in my opinion, the easiest to maintain and deal with its shortcomings.

Advantages

• The text will be rendered in the same position and style as the typed text
• Easy to change or translate the placeholder value, just by altering the markup

Disadvantages

• Unless you check the form before it’s submitted, the placeholder value will be sent. This is not a major issue with frameworks, because you can override the methods used to access values (like my solution)

The markup

The most straightforward way to implement solution #3 would be adding a placeholder attribute to the input like this:

<input type="text" placeholder="Your email" value="" name="email" id="contact_email" />
<textarea placeholder="Your message" name="message" id="contact_message"></textarea>

This certainly won’t validate, but you can always extend your Doctype. The inputs would be easily retrieved with a CSS selector by Javascript (input[placeholder]).

Another more accessible approach would be to transform labels into placeholders. Thus:

<label for="contact_email" class="placeholder">Your email</label>
<input type="text" value="" name="email" id="contact_email" />

with some Javascript becomes

// we remove the label from the dom, or set it to display=none
<input type="text" value="" placeholder="Your email" name="email" id="contact_email" />

and then the placeholder behavior is added normally.

MooTools implementation

Please head to the project page to see this in action.