Created
July 20, 2011 18:12
-
-
Save brentkirby/1095523 to your computer and use it in GitHub Desktop.
quick html5 feature detect for jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(jQuery, undefined){ | |
// | |
// Check an element for support of a particular attribute | |
function supports_attribute( attr, element, type ){ | |
element = document.createElement( element ); | |
exists = ( attr in element ); | |
if( typeof type == 'undefined' || exists === false ){ return exists; } | |
return jQuery.type( element[attr] ) === type; | |
} | |
// | |
// Check to see if a particular event is supported (ie. oninvalid) | |
function supports_event( event_name, element ){ | |
element = document.createElement( element || 'div'); | |
event_name = "on" + event_name; | |
return ( event_name in element ); | |
} | |
// | |
// Check to see if a particular input type is available | |
function supports_input( type ){ | |
var element = jQuery('#__test_input_field').get(0); | |
tester = "(wee);"; | |
element.setAttribute('type', type); | |
if( element.type !== 'text' ){ | |
// | |
// If the element doesn't support checkValidity, | |
// its a pretty safe bet its not a HTML5 element. | |
// | |
if( !( 'checkValidity' in element ) ) return false; | |
// Theres no way to double check these right now (?) so just assume we're good | |
if( /^(search|tel)$/.test( type ) ) return true; | |
element.value = tester; | |
if( /^(url|email)$/.test(type) ){ | |
return (element.checkValidity && element.checkValidity() === false); | |
} | |
return element.value != tester; | |
} | |
return false; | |
} | |
// | |
// Update jQuery.support to support details on html5 feature availability | |
// | |
function detect_support(){ | |
// Create an input for testing | |
var tester = jQuery(document.createElement('input')); | |
tester.css({ visibility:'hidden' }) | |
.attr('id', '__test_input_field') | |
.appendTo(jQuery('body')); | |
jQuery.support.input = jQuery.support.input || {}; | |
jQuery.support.events = jQuery.support.events || {}; | |
jQuery.support.attrs = jQuery.support.attrs || {}; | |
jQuery.support.input.email = supports_input( 'email', 'input' ); | |
jQuery.support.input.url = supports_input( 'url', 'input' ); | |
jQuery.support.input.number = supports_input( 'number', 'input' ); | |
jQuery.support.input.search = supports_input( 'search', 'input' ); | |
jQuery.support.input.range = supports_input( 'range', 'input' ); | |
jQuery.support.attrs.validity = supports_attribute( 'validity', 'input', 'object' ); | |
jQuery.support.attrs.pattern = supports_attribute( 'pattern', 'input' ); | |
jQuery.support.attrs.required = supports_attribute( 'required', 'input' ); | |
jQuery.support.attrs.placeholder = supports_attribute( 'placeholder', 'input' ); | |
jQuery.support.events.invalid = supports_event( 'invalid', 'input' ); | |
jQuery.support.events.formchange = supports_event( 'formchange', 'input' ); | |
jQuery.support.events.input = supports_event( 'input', 'input' ); | |
jQuery('#__test_input_field') | |
.remove(); | |
} | |
jQuery(function(){ | |
detect_support(); | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment