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!
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