modernizr
Version:
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
108 lines (90 loc) • 3.48 kB
JavaScript
/*!
{
"name": "Form input types",
"property": "inputtypes",
"caniuse": "forms",
"tags": ["forms"],
"authors": ["Mike Taylor"],
"polyfills": [
"jquerytools",
"webshims",
"h5f",
"webforms2",
"nwxforms",
"fdslider",
"html5slider",
"galleryhtml5forms",
"jscolor",
"html5formshim",
"jqueryformshim",
"selectedoptionsjs",
"formvalidationjs"
]
}
!*/
/* DOC
Detects support for HTML5 form input types and exposes Boolean subproperties with the results:
```javascript
Modernizr.inputtypes.color
Modernizr.inputtypes.date
Modernizr.inputtypes.datetime
Modernizr.inputtypes['datetime-local']
Modernizr.inputtypes.email
Modernizr.inputtypes.month
Modernizr.inputtypes.number
Modernizr.inputtypes.range
Modernizr.inputtypes.search
Modernizr.inputtypes.tel
Modernizr.inputtypes.time
Modernizr.inputtypes.url
Modernizr.inputtypes.week
```
*/
define(['Modernizr', 'inputElem', 'docElement', 'inputtypes', 'inputs', 'smile'], function( Modernizr, inputElem, docElement, inputtypes, inputs, smile ) {
// Run through HTML5's new input types to see if the UA understands any.
// This is put behind the tests runloop because it doesn't return a
// true/false like all the other tests; instead, it returns an object
// containing each input type with its corresponding true/false value
// Big thanks to @miketaylr for the html5 forms expertise. miketaylr.com/
Modernizr['inputtypes'] = (function(props) {
var bool;
var inputElemType;
var defaultView;
var len = props.length;
for ( var i = 0; i < len; i++ ) {
inputElem.setAttribute('type', inputElemType = props[i]);
bool = inputElem.type !== 'text';
// We first check to see if the type we give it sticks..
// If the type does, we feed it a textual value, which shouldn't be valid.
// If the value doesn't stick, we know there's input sanitization which infers a custom UI
if ( bool ) {
inputElem.value = smile;
inputElem.style.cssText = 'position:absolute;visibility:hidden;';
if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) {
docElement.appendChild(inputElem);
defaultView = document.defaultView;
// Safari 2-4 allows the smiley as a value, despite making a slider
bool = defaultView.getComputedStyle &&
defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' &&
// Mobile android web browser has false positive, so must
// check the height to see if the widget is actually there.
(inputElem.offsetHeight !== 0);
docElement.removeChild(inputElem);
} else if ( /^(search|tel)$/.test(inputElemType) ){
// Spec doesn't define any special parsing or detectable UI
// behaviors so we pass these through as true
// Interestingly, opera fails the earlier test, so it doesn't
// even make it here.
} else if ( /^(url|email)$/.test(inputElemType) ) {
// Real url and email support comes with prebaked validation.
bool = inputElem.checkValidity && inputElem.checkValidity() === false;
} else {
// If the upgraded input compontent rejects the :) text, we got a winner
bool = inputElem.value != smile;
}
}
inputs[ props[i] ] = !!bool;
}
return inputs;
})(inputtypes);
});