This week’s Tutorial of the Week will show you how to create a field placeholder than will work in both modern browsers that support HTML5 and those that still don’t.

What’s a placeholder?

A placeholder is used to display default text in a field which then disappears when you click the field to start writing inside it. They are regularly used when there is just not enough space to also have a label next to field to explain what that field is. For instance, rather than having a text box and the word “Search” to its left, you could simply add a text box with the word “Search” as the placeholder.

Here’s a quick example of a placeholder that Firefox uses in its search. Here’s the bar when it’s not in focus:

And here it is again once you start typing:

Creating an HTML5 placeholder

With HTML5, it is now possible to add a placeholder with one very simple code addition. Say our search field is the following:

<input id="q" name="search">

We would like this field to show the word “Search the site…” by default. Doing this in HTML5 is super simple:

<input id="q" name="search" placeholder="Search this site...">

That’s it! It really is THAT simple. Of course, this will NOT work in all browsers and it will most likely be quite a while before all browsers support HTML5 features. Here’s what it will work in:

IE: None (not surprisingly…)
Firefox: 3.7+
Safari: 4.0+
Chrome: 4.0+
Opera: 11.0+
iPhone: 4.0+
Android: None

So how can we know if the site is loaded in a browser that does not support it?

Detecting which browsers support placeholders

Below I will highlight two ways of detecting whether the browser supports placeholders. First off, here is the standard way that works with regular Javascript:

function isPlaceholderSupported() {

    var input = document.createElement("input");
    return ('placeholder' in input); 

}

var supported = isPlaceholderSupported();

Another way of doing this is using Modernizr – a script which detects support for all of HTML5 features. If you use this script, you would simply need to do:

var supported = Modernizr.input.placeholder;

Now that we know if a browser supports it or not, we can create a Javascript placeholder that only loads for those browsers that do not.

Creating a Javascript Placeholder

It’s very important to create a fallback Javascript placeholder because if your field does not show the placeholder text in the first place, then it is very likely that your users won’t understand what the field is for.

Let’s start with the same field:

<input id="q" name="search" value="Search this site...">

Notice I am using value rather than placeholder. This is because any older browsers will completely ignore the placeholder attribute and not show anything at all. For this example, I’ll assume you use jQuery. Here’s the function we need that will make the placeholder text appear and hide:

$(function() {
    $('#q').focus(function() {
        if ($(this).val() == 'Search this site...')
            $(this).val('');
    });

    $('#q').blur(function() {
        if($(this).val() == '')
            $(this).val('Search this site...');
    });
}

The functions above are triggered on blur and on focus of the search field we created earlier. On Focus, the code will check whether the placeholder text is the default Search this site… text. If it is, the field is cleared. On blur, we check whether the field is empty and if it is, we set it back to the default text.

This is simple enough but how do we combine the two?

Combining the two to be cross browser compatible

Let’s go back to the initial field:

<input id="q" name="search" placeholder="Search this site...">

With this in place, we can now use what we learned above and create the following:

$(function() {

    function isPlaceholderSupported() {
        var input = document.createElement("input");
        return ('placeholder' in input);
    } 

    var placeholdersupport = isPlaceholderSupported();

    if (placeholdersupport == false) {
        // If there is no placeholder support,
        // set the value of the input field to the
        // placeholder value
        $('#q').val('Search this site...');
    }

    $('#q').focus(function() {
        if (placeholdersupport == false) {
            if ($(this).val() == 'Search this site...')
                $(this).val('');
        }
    });

    $('#q').blur(function() {
        if (placeholdersupport == false) {
            if($(this).val() == '')
                $(this).val('Search this site...');
        }
    });
}

The code above will detect whether the placeholder attribute is supported and if it isn’t, it will immediately set the value of the input field to the placeholder text we choose. The rest should be pretty easy to understand.

The new HTML5 features are definitely a welcome addition for us web designers as they certainly make life much easier. However, it will be a very long while till all browsers out there support these features so until then, we always need to create fallback function.

Do you have a better way of achieving what I wrote above? Post below!