Created
March 9, 2012 21:56
-
-
Save zachleat/2008932 to your computer and use it in GitHub Desktop.
Prevent zoom on focus
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
// * iOS zooms on form element focus. This script prevents that behavior. | |
// * <meta name="viewport" content="width=device-width,initial-scale=1"> | |
// If you dynamically add a maximum-scale where no default exists, | |
// the value persists on the page even after removed from viewport.content. | |
// So if no maximum-scale is set, adds maximum-scale=10 on blur. | |
// If maximum-scale is set, reuses that original value. | |
// * <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,maximum-scale=1.0"> | |
// second maximum-scale declaration will take precedence. | |
// * Will respect original maximum-scale, if set. | |
// * Works with int or float scale values. | |
function cancelZoom() | |
{ | |
var d = document, | |
viewport, | |
content, | |
maxScale = ',maximum-scale=', | |
maxScaleRegex = /,*maximum\-scale\=\d*\.*\d*/; | |
// this should be a focusable DOM Element | |
if(!this.addEventListener || !d.querySelector) { | |
return; | |
} | |
viewport = d.querySelector('meta[name="viewport"]'); | |
content = viewport.content; | |
function changeViewport(event) | |
{ | |
// http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/ | |
viewport.content = content + (event.type == 'blur' ? (content.match(maxScaleRegex, '') ? '' : maxScale + 10) : maxScale + 1); | |
} | |
// We could use DOMFocusIn here, but it's deprecated. | |
this.addEventListener('focus', changeViewport, true); | |
this.addEventListener('blur', changeViewport, false); | |
} | |
// jQuery-plugin | |
(function($) | |
{ | |
$.fn.cancelZoom = function() | |
{ | |
return this.each(cancelZoom); | |
}; | |
// Usage: | |
$('input:text,select,textarea').cancelZoom(); | |
})(jQuery); |
Shouldn't it be $('input, select, textarea').cancelZoom();
to cover all types of inputs
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you, very useful.