Add HTML5 Placeholder Using jQuery for IE | Code Snippet

HTML5-Placeholder-For-IE-Using-jQueryCode Snippet #5: Today’s code snippet explains how to add a much needed HTML5 placeholder using jQuery for Internet Explorer as IE browsers don’t support HTML5 properties and syntax yet. A cross browser HTML5 placeholder using jQuery.

The web programming is changing at a very fast pace with new styles, syntax and technologies. There are still some browsers not supporting and adapting to these changes. The hard coded work of the programmers are going in vain when someone views the programmed web pages in a old browser or incompatible browsers. There are still many using IE 6 out there.

Today, we are going to explore a pretty new concept from HTML5 search box placeholder. Though, adding these in a HTML5 compatible browser is exteremely easy. Adding them in a non-compatible browser can be tough. We are going to add these HTML5 palceholders for IE browsers using jQuery, assuming the user’s browser has JavaScript support enabled.

DEMO: [View the below in Internet Explorer – IE]

Code for normal HTML5 placeholder:

That’s very simple. We just add a new attribute to the input tag called “placeholder”.

jQuery Code to add placeholder:

The above code snippet has the jQuery plugin inserted. Then, we start the actual jQuery manipulation to stick the placeholder. In this code, we try to add a placeholder text using the below code:

This part is reached when focus is not on the search box. When the focus is on the search box by clicking inside the search box, the code below removes the placeholder text:

There are various other condition checking whether the input type is a password or text and what should happen when it is a submit form.

Hope you liked this code snippet. Please let us know your bugs, experience and enhancements to this code via comments below.



Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...