HTML5 forms - HTML5 and CSS3 - page 70

For date inputs you have to go one step further. If you remember,
WebKit implements the date input type but doesn't provide any UI for
it. To detect if a UI is provided, set a value on the date element that isn't
a date:
var el = document.createElement("input");
el.setAttribute("type", "date");
el.value = "text";
if (el. value == "text") {
implementDateUI();
}
If the browser implements the date UI components, then it will be
impossible to set the value of the input to the string ''text''. Therefore,
if the element reports its value as ''text'' after you've set it, the UI isn't
implemented by the browser and you should provide your own. You might
also consider setting an appropriate pattern attribute at this point.
You may also want to check whether the user's browser supports one
of the new form attributes, such as autofocus or placeholder . Here's
some code to do this:
var el = document.createElement("input");
if (!!('placeholder' in el)) {
window.alert('Placeholder supported');
} else {
window.alert('Placeholder not supported');
}
The easiest approach is to loop through the available
properties on an element and see if one of them is the attribute
you're looking for. This same approach can be used for any of the
other new HTML5 attributes, not just form elements.
The final thing you might want to check is whether the browser
supports a particular event, such as the oninvalid event we discussed
earlier:
var eventName = "oninvalid";
var isSupported = !!(eventName in el);