How to check, if a HTML5 input is supported?

Question

I want to check in my website, if the visitors browser support a HTML5 input type. How should I do it?

Answer 1

i would comment on the accepted answer, but won't allow me without a certain reputation, so i'll do it this way. if a browser runs into an input type it doesn't recognize, it will automatically default to a 'text' input itself. so I would say the JS in the answer is unnecessary (unless you want to default to something other than 'text')

Answer 2

Modernizr has support for checking the new input types.

Answer 3

You could do:

function IsAttributeSupported(tagName, attrName) {
    var val = false;
    // Create element
    var input = document.createElement(tagName);
    // Check if attribute (attrName)
    // attribute exists
    if (attrName in input) {
        val = true;
    }
    // Delete "input" variable to
    // clear up its resources
    delete input;
    // Return detected value
    return val;
}

if (!IsAttributeSupported("input", "placeholder")) {
    // Do something special here
    alert("placeholder attribute is not supported");
}

Hope it helps

Answer 4

With the form fields you can use this:

var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";

If color is supported, i.type will be color but if it's not supported, the navigator returns text as default. So a simple verification like this can help you.