Quick Tip #10 – How to get HTML5′s placeholder working across all browsers

Posted on

Recently I've been trying out the HTML5 Boilerplate to get some of this new fangled HTML into my projects. One thing I particularly like about the boilerplate, is the feature that allows you to not just implement HTML5, but also provide a fallback for the not so fortunate browsers.

Please note, you don't have to be using the HTML5 Boilerplate to get this to work, simply, some of the great libraries it uses. Go grab yourself:

I'm going to use HTML5's placeholder attribute for form fields in this example. If you're not sure what placeholder does, it essentially pre-fills a form input with a piece of text, you click inside it, the hint removes itself and allows you to type, if you click elsewhere and you haven't typed anything, it comes back!

Before you start, make sure you've loaded in the jQuery and Modernizr library, do not load in the Example plugin, we'll deal with this later.

The HTML5

First, add a form field to your page with a placeholder. That's your HTML5 business out the way, it will perform nicely in these browsers.

<input name="search" placeholder="Search..." />

The Javascript fallback

Now for the fallback, which is pretty clever. It uses the Modernizr library to check for placeholder support, if it's not available, perform jQuery's Ajax call to asynchronously load in the Example jQuery plugin. Once the plugin is loaded we pass the element to fire the plugin on a return it's placeholder attribute as the text to use for the plugin.

$(document).ready(function(){
	if (!Modernizr.input.placeholder)
	{
	$.ajax({
		type: "GET",
	   	url: "example.js",
	  	dataType: "script",
	  	success: function()
	  	{
	  		$('input').example(function() {
				return $(this).attr('placeholder');
			});
	  	}
	});
	}
});

If anyone wants this code explained in a bit more detail, then let me know in the comments. If not, copy 'n' paste and away and improve it!

10 comments

  • thumbnail wrote on

    Why all the plugins? just a plain javascript loop should do the trick?

  • trinity wrote on

    Good – I should certainly say I’m impressed with your site. I had no trouble navigating through all the tabs and related information. The site ended up being truly simple to access. Good job.

  • Alexander Livingstone wrote on

    I think this is one of the most vital info for me. And i’m glad reading your article. But wanna remark on few general things, The web site style is ideal, the articles is really excellent : D. Good job, cheers

  • Pingback: Informasi Online Organisasi Wong Jawa Kelahiran di Sumatera

  • Pingback: Marketing

  • indboforsikring wrote on

    This is able to be the wonderful weblog for anybody who desires to seek out out about this subject. You recognize rather a lot its just about arduous to argue with you (not that I severely would want…HaHa)!!! You actually put a brand new spin on a topic thats been written about for decades. Nice issues, simply good!

  • this can be a wrote on

    hey buddy, this is a very intriguing article

  • Pingback: Web Development

  • peugeot logo vector wrote on

    Thanks for such an excellent post. It certainly made my day. It is such a pleasure to look forward to your post. Excellent ideas and valuable inputs is what I always look forward to from your end. I am sure all the readers are going to find this extremely helpful.

  • Osho Garg wrote on

    I Am Going To Bookmark Your Blog, Your Blog Contain Awesome Content That Why Google Love Your Blog :)

Add your comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>