It is possible in most browsers to use JavaScript to detect support for specific input types. This page uses my script.
color
number
range
url
date
datetime
month
time
week
I use the following script:
function supportsType(input) { var desiredType = input.getAttribute('type'); var supported = false; if (input.type === desiredType) { supported = true; } input.value = 'Hello world'; var helloWorldAccepted = (input.value === 'Hello world'); switch (desiredType) { case "email": case "url": if (!input.validationMessage) { supported = false; } break; case "color": case "date": case "datetime": case "month": case "time": case "week": if (helloWorldAccepted) { supported = false; } break; } return supported; }
The bulk of the detection is done in the traditional way by comparing the input.type
to the desiredType
.
If they don’t match it’s likely that the browser does not support the desired type.
I added two special cases:
validationMessage
on email
and
url
. Since Android WebKit doesn’t support these types either,
I decided to make validationMessage
a proxy for those types.input.value
. If the browser returns Hello World
the input type is not supported. This only goes for color
and the date-related types.These adjustments increase the success rate of the detection from 89% to 94%. This may sound small, but most of the solved problems are in Android WebKit, which still has decent market share, and in which the traditional detection does not work at all.