HTML5 Placeholder Enabler

In this post I will continue the series dedicated to HTML5 and enabling certain features of the language for browsers that still do not support them.

This tutorial also assumes the YUI JavaScript library and its code is in the same namespace as the HTML5 Details Element Enabler I wrote about last week.

According to WhatWG, “The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.“.  As of October 2011 it is not yet supported by Internet Explorer.

The solution presented in this post checks for the availability of the placeholder attribute in textboxes, and if it is not available applies its content as value to the elements that contain it. In order to achieve similar appearance as the real placeholder element we will also add or respectively remove a special CSS class name:

In short, the feature detection is:

var textarea = document.createElement("textarea");

if(undefined === textarea.placeholder) {
// execute code only for browsers that do not support placeholder

The _bind() method is pretty straightforward – we assign handlers for the focus() and blur() events, and according to the value of the input we set or unset the placeholder text:

_enable = function(e) {

element = e.currentTarget,
type = e.type;

case "focus":
if(element.get("value") === element.getAttribute("placeholder")) {
_set(element, false);
case "blur":
if(element.get("value") === "") {
_set(element, true);

The Markup:

<input type="text" placeholder="my placeholder text" />
<textarea placeholder="my placeholder text"></textarea>
<input type="password" placeholder="my placeholder text" />

The CSS Emulating the System Placeholder Style:

color: #ccc;

The demo is available on this page. If you are curious about more HTML5, CSS3 and JavaScript experiments, bookmark this page.

Related Posts


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s