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:
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