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

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

Reading Time: 3 minutes

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() {
jQuery.support.placeholder = false;
test = document.createElement(‘input’);
if(‘placeholder’ in test) jQuery.support.placeholder = true;
});

By doing this, we are simply extending the jQuery.support 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’)) {
$(this).val(”).removeClass(‘hasPlaceholder’);
}
}).blur(function () {
if ($(this).attr(‘placeholder’) != ” && ($(this).val() == ” || $(this).val() == $(this).attr(‘placeholder’))) {
$(this).val($(this).attr(‘placeholder’)).addClass(‘hasPlaceholder’);
}
});
$(‘:text’).blur();
$(active).focus();
$(‘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)

Varun Bhagat is a technology geek and works in PixelCrayons as a Sr. Technology Consultant. He possesses in-depth knowledge of different web development technology and helps our clients to choose the best technology as per their needs.

Are you ready to turn your idea into reality? Contact Us Now

More from PixelCrayons Blog:-

XHTML Compliance Website for Visually Disabled

XHTML Compliance Website for Visually Disabled

Note: The Visually Disabled here refers to people with weak eyesight, or any kind of visual ailment. One might usually ask, “Why XHTML?” “Is it really necessary?”, […] - Read More

Reset style sheet: An Opine

Reset style sheet: An Opine

Preferences of using CSS reset style sheets differ with different people. Many individuals find the approach ineffective while others are convinced with the features […] - Read More

Avail 15% Christmas Discount on PixelCrayons Markup Services

Avail 15% Christmas Discount on PixelCrayons Markup Services

Christmas is the best way to bid good-bye to the year and wish everyone who have made this year valuable to us. In this frosty Christmas season, PixelCrayons has […] - Read More

Beginning of PSD to HTML Conversion Process- an Overview

Beginning of PSD to HTML Conversion Process- an Overview

About 5-6 years back, only a limited number of companies used to offer markup services. That is why, there was no such competition existed between them. Today, plenty […] - Read More