Detecting Original HTML5 Input Types On Unsupported Browsers

I’ve been doing some work recently on extending jQuery UI to style form elements using the Themeroller. One thing that I wanted to implement was detection of the new HTML5 input types and choosing the correct widget to use based upon that. This would provide progressive enhancement of the input element to support the HTML5 input type, even if that type of input isn’t supported on that browser.

By definition, if a browser can’t support the type of an input, it automatically falls back to a text input. This is great for backwards compatibility, but it gave me a bit of a problem. If I set type=”number” in my HTML, testing the type of the element in Javascript returns “text” when the number element isn’t supported. Useful for determining if support is available, not so useful for determining what the original value is in the HTML.

In most browsers, you can find the original value using the attributes collection. However, this doesn’t work in IE7 and earlier. And, as everyone knows, we still have to support IE 6 & 7 for most web sites. I found an alternative for IE, which is to test the outerHTML of the element using a regular expression. IE will return this with the original attributes intact.

I’ve written a jQuery filter extension that allows you to test any element for the original input type: