HTML5 Placeholder feature detection woes

Question

I need to test for placeholder support. The following works great in all modern browsers, as well as IE7, IE8, IE9:

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

It works, but JSLint complains about the use of in:

Unexpected 'in'. Compare with undefined, or use the hasOwnProperty method instead.

Fine, so I'll refactor it to this:

$.support.placeholder = (function () {
    var i = document.createElement("input");
    return i.hasOwnProperty("placeholder");
}());

Now this passes JSLint without any errors or warnings, but it breaks in IE7 and IE8 with this old chestnut:

Object doesn't support property or method 'hasOwnProperty'

Any idea how to make JSLint happy, as well as IE7 and IE8?

Lithotomy

Making a tool like jslint happy doesn't necessarily mean making your code better as long as you know what you are doing. If your bosses want it, give them some good examples proving them stupid. – Sanguinolent

I don't no why jslint recommends against in. It's been around for a while so should have full support and it's pretty intuitive. For placeholder support, this is solid: github.com/mathiasbynens/jquery-placeholder – Samovar

Answer 1

You could also use the other solution JSLint suggests:

return typeof i.placeholder !== 'undefined';

This should work cross browser without problems.

Toddler

This also works well, and is pretty concise, and if I had bothered reading into the error message I should have figured this out :) – Lithotomy

Actually JSLint wants you to use return i.placeholder !== undefined; and it'll say as such if you try and use typeof i.placeholder !== 'undefined';. – Kata

Answer 2

My answer would be don't. Don't make JSLint happy. JSLint is how Crockford views JavaScript should be done. It's his personal standard. If you want some kind of lint for JavaScript, use JSHint. It's a forked version of JSLint that is entirely configurable and without the crazy requirements. From it's homepage:

JSHint is a fork of JSLint, the tool written and maintained by Douglas Crockford.

The project originally started as an effort to make a more configurable version of JSLint—the one that doesn't enforce one particular coding style on its users—but then transformed into a separate static analysis tool with its own goals and ideals.

Arguable

Agreed, but not my decision unfortunately. I must live with it, at least for the time being. +1 anyway. – Lithotomy

Answer 3

You can fetch the function via Object.prototype, then call it on the element. This makes for the function being available and you being able to call it in a i.hasOwnProperty-fashion way (i.e. the this value behind the scenes when calling it is i):

Object.prototype.hasOwnProperty.call(i, "placeholder");

Mazel

Hmm, which one would you go with. – Lithotomy

@karim79: This one allows for the property being set to undefined, but on the other hand does introduce a function call overhead. – Mazel