Cross-browser support

The placeholder attribute is not supported by all browsers, especially old ones. To make it work in all browsers, JavaScript can be used.

jQuery Placeholder plugin does it perfectly. The plugin is very simple in use; it checks automatically if browser has a native support of HTML5 placeholder attribute for input and textarea tags. If it does, the plugin doesn't do anything. But, if the placeholder attribute is only supported by input tags, then the plugin does nothing about input tags and is applied to textarea tags exclusively. And, of course, in the case when both tags don't support the attribute then the plugin is applied to input and textarea tags.

To use the plugin, JavaScript files with jQuery and the plugin must be downloaded and added to the HTML page.

Checking if a browser natively supports placeholder attribute

This can be done by using JavaScript. So, the jQuery Placeholder plugin can be used for this purpose.

First the plugin must be added to HTML page as described above. After this, the following JavaScript code checks browser support for both tags (input and textarea). Insert this code after adding jQuery and the plugin to HTML page:

As can be seen from the styles above, all CSS selectors are separated. They can't be set as a group of selectors, because they will be ignored by browsers. This happens because if one of the selectors is invalid then styles for the whole group are ignored. In this specific case only one selector for each browser is valid, the rest of them are invalid.

In case when browser doesn't support the placeholder attribute, jQuery Placeholder plugin will add "placeholder" class for input and textarea tags. So, CSS styles will look like this:

Facebook comments

Discussion (total 4 comments)

Html5 has made things easy for web developers and designers. Placeholder is one nice thing it has added. But still not fully supported by all browsers. This article will surely help to implement placeholder attribute on all browsers. Many thanks

Shrikant

January 29, 2014 at 02:45 am

what about cross-browser support to type "password"

Administrator User

January 29, 2014 at 05:54 am

Shrikant, what did you mean? The cross-browser example (the last one in this article) works fine in IE7.