移动Safari自动对焦文本字段

巫马浩言

2023-03-14

问题内容：

在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启动一个新的调用堆栈，并且启动了安全机制以防止您将焦点放在输入上。

请记住，在iOS上，将焦点放在输入元素上会弹出键盘-
因此，像Google一样，所有在页面加载时将焦点放在输入元素上的网页都会在iOS上使用非常烦人。我想苹果公司决定他们必须采取一些措施来防止这种情况。所以我不同意@DA：这是一个功能，而不是错误。

没有已知的解决方法，因此您必须放弃使用延迟的想法。

更新：

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

移动Safari自动对焦文本字段

相关阅读

相关文章

相关问答

相关工具

相关文档