HTML and CSS Reference
In-Depth Information
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") {
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
var eventName = "oninvalid";
var isSupported = !!(eventName in el);
Search WWH ::

Custom Search