<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"><style type="text/css">p,label{font-family:sans-serif;}.test{text-align:center;}input[type=text]{height:3em;width:10em;}label{display:block;background:gray;line-height:2em;display:inline-block;font-weight:bold;}/* 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(){FastClick.attach(document.body);},false);</script></head><body><p>FastClick is instantiated on the body element, but the <code>input</code> element below will not receive fast clicks. Instead <code>focus()</code> will be called on the input element when <code>touchend</code> fires.</p><p>The keyboard will still appear after delay on iOS 4 or earlier, however.</p><divclass="test"><inputtype="text"id="tap-me"placeholder="Tap me"></div><p>The same is true for the <code>select</code> element. It should open quickly on iOS > 4.</p><divclass="test"><select><option>Banana</option><option>Apple</option></select></div><p>The text below is a <code>label</code> for the text input element above. FastClick should automatically resolve the ID in the <code>for</code> attribute and trigger focus on the input element. This doesn't work on iOS 4, however (with or without FastClick).</p><labelfor="tap-me">I'm a label - tap me</label><p>Checkbox labels don't work on iOS 4, but with FastClick, they do!</p><inputtype="checkbox"id="check-me"/><labelfor="check-me">I'm a label - tap me</label></body></html>
