HTML5 Placeholder Attribute: How to use it on all the Browsers?

HTML5 is offering many advanced features with a multitude of forms, which make it easier for the developers to custom design their process and yield better results and save time. One of such new addition to the HTML5 web development forms is the feature of “placeholder attribute”. Placeholder text is basically the “hint” or otherwise the example text, which is being put on the text input fields as default before the user is clicking on the specific field. At the moment user is accessing the field, the text fades away and the user gets a clear idea on what and how to enter the text. The HTML code to be used for this purpose is very simple.

<input type=”text” placeholder=”Start typing to begin searching.” />

The only new addition to this from than the conventional style is the placeholder attribute, but as a result you can see the text “Start typing to begin searching” in the preferred text box, which gives a clear direction to the user. To follow this instruction, when the user click on the field and start to enter the desired text, the pre-placed text will automatically go away.

The major advantage of placeholder attribute is that it will make the complex and big online forms simpler to navigate. There is no better place than displaying the explanation text than the input field itself. Also if you want to make your forms shorter to fit into a small space, then the placeholder text can be used as the field label itself, which will in turn make your form more compact. However, as per theW3C standards, it is suggested to use a label field itself rather than placeholder attributes to tag a text box.

One of the major disadvantage many are facing with this is the fact that placeholder is not supported everywhere. It is supported by Firefox 3.7+ as well as Chrome and Safari 4.0+, but IE and Opera are not supporting it. However, these browsers will not break if they encounter the placeholder attribute, but instead they will fully ignore it. But fortunately, there is a solution for this problem. We can use the placeholder attribute for all the browsers, which support it and then simply fake the same functionality for all the legacy browsers, which do not support it.

The first step of using the placeholder attribute for the supported browsers is pretty easy as we just need to write the code as given above and it simply does the magic. Things may change eventually that other browsers also may start to support it over time with the increasing popularity of placeholder text, but for time being what we can do is add a bit of jQuery in order to find whether the user browser supports the placeholder attribute.

This below jQuery code can execute this task as desired.

jQuery(function() { = false;
test = document.createElement(‘input’);
if(‘placeholder’ in test) = true;

By doing this, we are simply extending the object. Now we need to use JavaScript in order to create a new input object, and then we need to test and see whether the “placeholder” attribute is there as an option inside this object. It will be there as an option in the browsers which support this attribute and will be absent in the rest.

Faking the Functionality

So, for unsupported browsers, we need to make them behave in the same way as it is being functioning in the supported browsers. One useful tip to be known is that even on the user’s browser not recognizing the placeholder attribute, the jQuery, which is running will find it just fine. So, we can blindly use placeholder in our jQuery code. Then, the following code can do the trick, though it may look a bit complicated logically.

$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(‘:text’).focus(function () {
if ($(this).attr(‘placeholder’) != ” && $(this).val() == $(this).attr(‘placeholder’)) {
}).blur(function () {
if ($(this).attr(‘placeholder’) != ” && ($(this).val() == ” || $(this).val() == $(this).attr(‘placeholder’))) {
$(‘form’).submit(function () {
$(this).find(‘.hasPlaceholder’).each(function() { $(this).val(”); });

Even on getting it achieved through a bit complicated back-end process, the above code is successful in simply mimicking the same functionality of HTML5 placeholder attribute and showing it in the same way on all browsers.

(Have been liking our posts for a while? Subscribe now! We’ll make sure that you never miss an update. And talk to our Experts now if you need professional help with your Custom Web Development services)

One thought on “HTML5 Placeholder Attribute: How to use it on all the Browsers?”

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