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?

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. — ThiefMaster, Dec 21 '11 at 12:39
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: https://github.com/mathiasbynens/jquery-placeholder — ryanve, Jan 19 '12 at 21:53

score 15 · Accepted Answer · edited Feb 19 '14 at 03:31

15

You could also use the other solution JSLint suggests:

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

This should work cross browser without problems.

edited Feb 19 '14 at 03:31

TheSharpieOne

25,646
9
66
78

answered Nov 23 '11 at 15:55

Daff

43,734
9
106
120

This also works well, and is pretty concise, and if I had bothered reading into the error message I should have figured this out :) – karim79 Nov 23 '11 at 15:59
2

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';`. – MHollis Jul 23 '12 at 17:19

score 5 · Answer 2 · answered Nov 23 '11 at 15:54

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.

Agreed, but not my decision unfortunately. I must live with it, at least for the time being. +1 anyway. — karim79, Nov 23 '11 at 16:00

score 3 · Answer 3 · answered Nov 23 '11 at 15:54

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

answered Nov 23 '11 at 15:54

pimvdb

151,816
78
307
352

Hmm, which one would you go with. – karim79 Nov 23 '11 at 15:59
@karim79: This one allows for the property being set to `undefined`, but on the other hand does introduce a function call overhead. – pimvdb Nov 23 '11 at 16:00

HTML5 Placeholder feature detection woes

3 Answers3