How to determine if HTML5 input control is supported?
If I put an element <input type="range">on the form, some browsers (correctly) will display the slider control, while others will not know what rangeis and will display the text field. Handling this case will require additional verification, since the text field can contain any arbitrary text. Is there any JavaScript that I can put on the page to say “look at this control in the DOM, and if it is a text box control, do it foo()”?
This site recommends using the Modernizer :
HTML5 input type checking uses discovery method # 4. First, you create a dummy element <input>in memory. The default input type for all elements <input>is "text." It will be vital.
var i = document.createElement("input");
Then set the type attribute on the dummy element to the type of input that you want to detect.
i.setAttribute("type", "color");
If your browser supports this type of input, the type property will retain the value you specified. If your browser does not support this type of input, it will ignore the value you set and the type property will still be "text".
return i.type !== "text";
, 13 , Modernizr , HTML5. Modernizr <input> 13 . Modernizr.inputtypes, 13 ( HTML5) 13 (true, , false, ).
//check for native date picker
if (!Modernizr.inputtypes.date) {
// no native support for <input type="date"> :(
// maybe build one yourself with Dojo or jQueryUI
}