HTML5 tests - checking input types with JS

It is possible in most browsers to use JavaScript to detect support for specific input types. This page uses my script.

color

email

number

range

url

date

datetime

month

time

week

Script

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:

  1. All browsers but Android WebKit support validationMessage on email and url. Since Android WebKit doesn’t support these types either, I decided to make validationMessage a proxy for those types.
    That’s theoretically iffy, but Android WebKit isn’t being maintained any more, so this situation will not change.
  2. I set the input’s value to 'Hello world' and then query 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.