Use IDL attributes to test <input type=""> support

HTML5 input control types still have a ways to go before every type is supported in every browser. In the meantime, you may still find that you need to feature-test whether a particular type is supported. Do this by checking the value of the type IDL attribute.

IDL attributes are defined by the HTML5 specification for each element or object. This allows us to retrieve our element properties or attributes using dot syntax. Though IDL attribute values often mirror DOM attribute values, they're not the same. In fact, sometimes — as with the type attribute of the input element — they're quite different.

As outlined in the HTML5 specification, if a user agent doesn't support a particular form type, the value of its IDL type property must be text. Take a look at the form below.

<form action="/script" method="post">
    <input type="date" name="eventdate" id="eventdate">
    <button type="submit">Save</button>
</form>

In browsers that don't support the date input type, the value of document.getElementById('eventdate').type will be text. But if you use document.getElementById('eventdate').getAttribute('type'), the value returned will match the value of type as authored, that is: date.

You'll run into this with jQuery and its .attr() as well. To use our example from above, $('#eventdate').attr('type') will return the DOM attribute value rather than the IDL attribute value. To retrieve the IDL value, you should retrieve the element instead of the jQuery object, and then check its IDL value. We'd just need to rewrite $('#eventdate').attr('type') to be $('#eventdate')[0].type.