移动Safari自动对焦文本字段

Question

移动Safari自动对焦文本字段

boy*_*ymc 55 javascript focus mobile-safari autofocus

在Mobile Safari中,在设置延迟时间后,我无法将注意力集中在文本字段上.我附上一些展示问题的示例代码.如果单击该按钮,则触发.focus(),一切都按预期工作.如果你把焦点放在回调上,比如setTimeout函数,那么它只能在移动safari中失败.在所有其他浏览器中,有一个延迟,然后焦点发生.

令人困惑的是,即使在移动游猎中,也会触发"focusin"事件.这个(和SO中的〜类似〜评论)让我觉得它是一个移动的safari bug.任何指导都将被接受.

我已经在模拟器和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>

Run Code Online (Sandbox Code Playgroud)

〜相似〜问题:

Answer 1

Mat*_*hew 80

我认为这是移动Safari的一个功能,而不是一个bug.在我们关于FastClick的工作中,我和我的同事发现,如果调用堆栈中的第一个函数是由非程序化事件触发的,iOS将只允许在函数内的其他元素上触发焦点.在您的情况下,调用setTimeout启动一个新的调用堆栈,安全机制启动,以防止您将焦点设置在输入上.

请记住,在iOS设置上,关注输入元素会调出键盘 - 因此所有那些专注于页面加载的输入元素的网页,就像Google一样,在iOS上使用会非常烦人.我猜Apple决定他们必须采取措施来防止这种情况发生.所以我不同意@DA:这是一个功能,而不是一个bug.

对此没有已知的解决方法,所以你必须放弃使用延迟的想法.

2012年8月更新:

从iOS 5开始,允许由合成点击事件触发的处理程序触发对输入元素的关注.尝试更新的FastClick输入焦点示例.

只是想补充一点,整个行为是由UIWebView控件的这个属性引起的:http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#// apple_ref/occ/instp/UIWebView/keyboardDisplayRequiresUserAction在Safari中它被设置为'YES',在Homescreen Webapps中它是'NO',如果你在自己的应用程序中实现控件,它取决于你. (19认同)
@RonnyHeuschkel谢谢!我们正在实现一个PhoneGap应用程序,我们只是在`(void)webViewDidFinishLoad:(UIWebView*)theWebView`方法中插入以下代码:`theWebView.keyboardDisplayRequiresUserAction = NO;`就像一个魅力! (10认同)

Answer 2

小智 5

只有当原始事件来自用户交互而不是来自setTimeout时,才能通过调度click事件来提升键盘.我相信结果是你可以从touchend事件中提升键盘,但仍然不会超时.

归档时间：	14 年，4 月前
查看次数：	73712 次
最近记录：	12 年，1 月前