在Mobile Safari中,设置延迟时间后,我无法专注于文本字段。我附上了一些展示此问题的示例代码。如果在单击按钮时触发.focus(),则一切正常。如果您将焦点放在回调(如setTimeout函数)上,则仅在移动浏览器中失败。在所有其他浏览器中,存在延迟,然后出现焦点。
令人困惑的是,即使在移动浏览器中,也会触发“ focusin”事件。这个(和SO中类似的注释)使我认为这是一个移动的野生动物园错误。任何指导将被接受。
我已经在模拟器和iPhone 3GS / 4 iOS4上进行了测试。
HTML示例:
<!DOCTYPE html> <html lang='en'> <head> <title>Autofocus tests</title> <meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'> <meta content='yes' name='apple-mobile-web-app-capable'> </head> <body> <h1> Show keyboard without user focus and select text: </h1> <p> <button id='focus-test-button'> Should focus on input when you click me after .5 second </button> <input id='focus-test-input' type='number' value='20'> </p> <script type="text/javascript"> //<![CDATA[ var button = document.getElementById('focus-test-button'); var input = document.getElementById('focus-test-input'); input.addEventListener('focusin', function(event) { console.log('focus'); console.log(event); }); button.addEventListener('click', function() { // *** If triggered immediately - functionality occurs as expected // input.focus(); // *** If called by callback - triggers the focusin event, but does not bring up keyboard or cursor var t = setTimeout("input.focus();",500); }); //]]> </script> </body> </html>
我认为这是移动Safari的功能,而不是错误。在我们对FastClick的研究中,我和我的同事们发现,如果调用堆栈中的第一个函数是由非编程事件触发的,则iOS仅允许在函数内的其他元素上触发焦点。在您的情况下,对的调用将setTimeout启动一个新的调用堆栈,并且启动了安全机制以防止您将焦点放在输入上。
setTimeout
请记住,在iOS上,将焦点放在输入元素上会弹出键盘- 因此,像Google一样,所有在页面加载时将焦点放在输入元素上的网页都会在iOS上使用非常烦人。我想苹果公司决定他们必须采取一些措施来防止这种情况。所以我不同意@DA:这是一个功能,而不是错误。
没有已知的解决方法,因此您必须放弃使用延迟的想法。
更新:
从iOS5开始,允许由合成点击事件触发的处理程序触发对输入元素的关注。请尝试更新的FastClick输入焦点示例。