ansaurus

Question

jQuery: How to test is the browser supports the native placeholder attribute?

Answer 1

+1 A:

Use the Modernizr library, which you can find here: http://www.modernizr.com/

And then do this:

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

Modernizr is really handy for testing the browser's support for almost all HTML5 functionality.

Ender 2010-10-14 21:45:43

Thanks for your answer. I am already using Modernizr in my document however for this plugin to work on all sites I don't want to rely on any external libraries such as Modernizr other than jQuery of course. On my current page that I am building this indeed works great, but just for general compatibility I'd prefer something not reliant on Modernizr.

Jannis 2010-10-14 21:50:52

Answer 2

+3 A:

You can add to $.support quite easily by inserting this at the top of the Javascript you've written:

jQuery.support.placeholder = (function(){
    var i = document.createElement('input');
    return 'placeholder' in i;
})();

You can then use either $.support.placeholder or jQuery.support.placeholder anywhere in your code.

NB This code adapted from diveintohtml5, the link provided by hellvinz above.

lonesomeday 2010-10-14 21:56:12

This is brilliant and exactly what I was looking for. Thank you. PS: Thanks for the link, great resource. *Bookmarked!*

Jannis 2010-10-14 22:08:32

Thank hellvinz, not me, for the link! What's more, it would be trivial to create a plugin that imports all Modernizr tests to `$.support`. A quick test reveals that it would be a 11kb file once minified.

lonesomeday 2010-10-14 22:31:06

even if all i want to test for is form functionality?

Jannis 2010-10-15 21:27:08

No, that's for the whole library. I've rewritten the diveintohtml5.org HTML5 form code as a plugin to extend `$.support`. It's at http://pastebin.com/NVs09xzX at the moment and I'll put it on the jQuery site as a plugin soon.

lonesomeday 2010-10-15 22:20:15

Hey, thanks for your comment! That little plugin is exactly what I needed. Do you mind if I include it in my jquery plugin that I'm writing at the moment?

Jannis 2010-10-16 23:59:38

ansaurus

tags:

views:

answers:

jQuery: How to test is the browser supports the native placeholder attribute?

related questions