CODEWITHSUNDEEP
javascripthtml
Uw001
Uw001

Reputation: 363

How to check, if a HTML5 input is supported?

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

Upvotes: 13

Views: 4528

Answers (4)

Gp2mv3
Gp2mv3

Reputation: 1451

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.

Upvotes: 26

Andrew Brown
Andrew Brown

Reputation: 5424

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')

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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

Upvotes: 1

pimvdb
pimvdb

Reputation: 154818

Modernizr has support for checking the new input types.

Upvotes: 13

Related Questions