28
Jan

Quick Tip #10 - How to get HTML5’s placeholder working across all browsers

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!

Author: Benjamin Reid

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

This entry was posted on Friday, January 28th, 2011 at 1:09 pm and is filed under Quick Tips & tagged with HTML5, JavaScript, jQuery, Placeholder. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses | Make a comment

thumbnail wrote on April 4, 2011

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

Reply
Stock Calculator wrote on September 6, 2011

Hey very cool site!! Man .. Excellent .. Amazing .. I’ll bookmark your blog and take the feeds also…I’m happy to find a lot of useful info here in the post, we need develop more techniques in this regard, thanks for sharing. . . . . .

Reply
microsoft sidewinder x6 wrote on September 13, 2011

I just got here in from Google. This looks like a fantastic site. I had an exquisite time studying your web page, and I’ll you’ll want to come back. I saved your page and I also passed your web page to a few members of the family as well. I hope you don’t thoughts!

Reply
freshwater pearls wrote on September 15, 2011

It is the best time to make some plans for the future and it’s time to be happy. I have read this post and if I could I desire to suggest you some interesting things or tips. Maybe you could write next articles referring to this article. I desire to read even more things about it!

Reply
Manda Bernstein wrote on October 28, 2011

thanks for the good work

Reply
Fashion Advice for Indian Women wrote on November 17, 2011

Fashion Advice for Indian Women…

[...]Quick Tip #10 - How to get HTML5’s placeholder working across all browsers | Nouveller[...]…

Reply
trinity wrote on January 4, 2012

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.

Reply
prenatal vitamins wrote on January 5, 2012

I’m extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the excellent quality writing, it’s rare to see a great blog like this one nowadays..

Reply
Alexander Livingstone wrote on January 5, 2012

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

Reply
Web Design Schools wrote on January 24, 2012

Excellent post. I’ve been looking around on the internet for this kind of information, and I’m glad I landed on this blog. Thanks for sharing it!

Reply
Informasi Online Organisasi Wong Jawa Kelahiran di Sumatera wrote on February 6, 2012

Informasi Online Organisasi Wong Jawa Kelahiran di Sumatera…

[...]Quick Tip #10 - How to get HTML5’s placeholder working across all browsers | Nouveller[...]…

Reply