9

I want to check if the browser who's running my page is capable of handling the 'html 5 placeholder'

I know I can add the following javascript check: 

!Modernizr.input.placeholder

but is it worth to import a library just for one check ?

also how does modernizr do that for me (i mean how is it implemented under the cover) ?

sascha
  • 4,671
  • 3
  • 36
  • 54
Zo72
  • 14,593
  • 17
  • 71
  • 103

4 Answers4

9

If you want to check for placeholder support, then all you need to do is;

var placeholderSupport = "placeholder" in document.createElement("input");

And to answer your other question; no, there is absolutely no point including the whole Modernizr library for 1 line of JS (Modernizr is 1000+ lines.... go figure :))*

*Yes, not minified, but the concept remains

Matt
  • 74,352
  • 26
  • 153
  • 180
  • 11
    A point of clarification, Modernizr provides the uncompressed source for research and development purposes. Modernizr offers no minified version with everything in it. You are encouraged to create a custom build. So it's not a oneliner vs 1000+ liner comparison. – Paul Irish Nov 04 '11 at 20:11
  • 9
    Additionally Modernizr is a repository of edge cases. Testing support for input type=range, for example, is fraught with peril. Inventing custom tests each time is a good way to end up with something as fragile as a UA sniff. People have done it before with HTML5 form input tests and all their "so simple" detects are now broken. Disclaimer: I write Modernizr, obviously. :p – Paul Irish Nov 04 '11 at 20:12
  • 3
    To be fair, After gzip its a 87 to 500 byte difference :) – Paul Irish Nov 04 '11 at 20:27
7

You could just get what you need from modernizr by just selecting "Input Attributes" for example and generate a build

http://www.modernizr.com/download/

Marty
  • 2,965
  • 4
  • 30
  • 45
3

It's open-source. Go read it.

Modernizr['input'] = (function( props ) {
  for ( var i = 0, len = props.length; i < len; i++ ) {
    attrs[ props[i] ] = !!(props[i] in inputElem);
  }
  return attrs;
})(('autocomplete autofocus list placeholder max min ' +
    'multiple pattern required step').split(' '));
mqp
  • 70,359
  • 14
  • 95
  • 123
  • 2
    Admittedly, that source is very hard to understand for people who aren't familiar with that trick. – SLaks Nov 04 '11 at 13:49
  • One might scratch one's head if one hasn't seen the `!!` idiom before, but it's easy to get the gist of it, which is that modernizr is just checking to see if the property exists and nothing further. – mqp Nov 04 '11 at 13:52
  • 1
    @mquander That source code is a bit beyond me. Why the two exclamation points ??? – Zo72 Nov 04 '11 at 13:52
  • @lorenzo: It's a terse way to coerce a truthy or falsy Javascript value into being actually true or false. For example, if `props[i]` is `42`, then `!props[i]` is `false`, so `!!props[i]` is `true`. – mqp Nov 04 '11 at 13:54
  • @mquander: Although in which circumstances is `x in y` non boolean? Doesn't it always return a boolean? – Matt Nov 04 '11 at 13:55
  • 2
    @Matt: I actually have no idea -- if you had asked me five minutes ago, I would have guessed that `in` always returns a boolean (but I've only been programming Javascript for two months.) Hypothesis: maybe it's a way to clean up after some old browser which returns other values from `in`? – mqp Nov 04 '11 at 13:57
  • @mquander: I've never heard of `in` not returning a boolean, so I'll have to agree with your hypothesis :P – Matt Nov 04 '11 at 14:02
  • That `!!` is indeed mysterious, given the `in`. – iono Sep 11 '13 at 06:50
1

Found this: http://davidwalsh.name/html5-placeholder

Code:

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

There's also a fallback solution, by clicking the link

sascha
  • 4,671
  • 3
  • 36
  • 54