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?

Answer 1

You could also use the other solution JSLint suggests:

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

This should work cross browser without problems.

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.

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");