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) ?

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) ?

• javascript
• html
• placeholder
• modernizr

4 Answers 4

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}

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/

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(' '));

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