Cross-Browser HTML5 Placeholder Text

Mar 28, 2011 ? Tutorials → Javascript

One of the nice enhancement in HTML5 web form is being able to addplaceholder text to input fields. Placeholder attribute allows you todisplay text in a form input when it is empty and when it is not focused(it clears the field on focus). This is a nifty feature, but it is notsupported by all browsers yet. This tutorial will show you how to useModernizr to detect if placeholder is supported, or else use jQuery todisplay the fallback placeholder text dynamically.

Demo HTML5 Placeholder

Download Demo Zip

Old School Javascript Way

Before we had the placeholder attribute, we relied on Javascript tofake the placeholder text. Below is an example. The text is inserted inthe value attribute. On focus, it checks if the value is "search" andreturns empty to clear the field. If the value is empty, it returns"search." As you can see, this way is not an efficient way because eachfield has to be checked.

jQuery Placeholder Text (Demo)

Now with HTML5 placeholder, it is more semantic to use placeholderthan value attribute. However, placeholder text is not supported by allbrowsers. To make it cross-browser, Modernizr and jQuery come in handy here.

Modernizr is used here to check if placeholder is supported. Ifplaceholder is not supported, the jQuery code will run. It finds allelements with placeholder attribute and stores in a variable. It thencompares the input value with the placeholder attribute. If the inputvalue is empty, it will display the placeholder text and add a"placeholder" class to the input field. View Demo.

To use this on your site, download a copy of Modernizr and jQuery andpaste the following code any where in your html page (be sure thejquery.js and modernizr.js file is in correct path).

Remove Webkit Search Input Styles

Webkit browsers add extra styling to the search input field. To remove them, add the following CSS code:

input[type=search] {
-webkit-appearance: none;
}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button {display: none;}

Credit

The jQuery code is found at Nico Hagenburger.