examples/focus.html

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<style type="text/css"> 
	p, .test { font-family: sans-serif; }
	.test { margin: 1em 4em; line-height: 4em; border: 1px solid black; font-size: 2em; text-align: center; }
	input { height: 3em; width: 10em; margin: 1em auto; display: block; }

	/* Disable certain interactions on touch devices */
	body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-highlight: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
</style> 
<script type="application/javascript" src="../lib/fastclick.js"></script> 
<script type="application/javascript">
	window.addEventListener('load', function() {
		var textInput = document.querySelector('input');

		FastClick.attach(document.body);
		Array.prototype.forEach.call(document.getElementsByClassName('test'), function(testEl) {
			testEl.addEventListener('click', function() {
				textInput.focus();
			}, false)
		});
	}, false);
</script> 
</head> 
<body> 
	<p>FastClick is instantiated on the body element, so all visible elements on this page will receive fast clicks - except one.</p> 
	<p>The layers marked <var>A</var> and <var>B</var> both have <code>click</code> handlers that will attempt to trigger focus on the <code>input</code> element programatically. However, <strong>on iOS before version 5.0</strong>, event handlers that are triggered by programmatic events are not allowed to trigger focus on other elements.</p> 
	<p>On earlier versions of iOS, only <var>B</var> will succeed at triggering focus on the input element, because it has a <code>needsclick</code> class which will instruct FastClick not to trigger a programmatic click and let the system click event go through instread.</p> 
	<div>
		<input type="text">
		<div class="test">A</div> 
		<div class="test needsclick">B</div> 
	</div>
</body> 
</html>