Mobile Safari自动对焦文本字段



在Mobile Safari中,设置延迟期后,我无法专注于文本字段。我附上了一些展示这个问题的示例代码。如果点击按钮,触发.focus(),一切都会按预期进行。如果你把焦点挂在回调上,比如setTimeout函数,那么它只会在移动safari中失败。在所有其他浏览器中,都会出现延迟,然后出现焦点。

令人困惑的是,"focusin"事件被触发了,甚至在移动狩猎中也是如此。这(以及SO中类似的评论)让我觉得这是一个移动狩猎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>

~类似~SO问题:

  • 在ios设备mobilesafari上以编程方式选择输入字段中的文本
  • 如何在手机屏幕上进行自动对焦
  • 在移动safari中设置文本框焦点中的注释

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

请记住,在iOS上,将焦点设置在输入元素上会打开键盘,所以所有像谷歌一样在页面加载时将焦点设置为输入元素的网页在iOS上使用都会非常烦人。我想苹果公司决定他们必须采取措施来防止这种情况的发生。所以我不同意@DA的观点:这是一个功能,而不是一个bug。

目前还没有已知的解决方法,所以你必须放弃使用延迟的想法。

2012年8月更新:

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

只有当原始事件来自用户交互,而不是来自setTimeout时,我才能通过调度点击事件来启动键盘。我相信结果是,你可以从触摸端事件中抬起键盘,但仍然不能从超时中抬起。

似乎只有当您将网站添加到主屏幕并使用此链接打开网站时,focus()才能工作。

添加到Matt答案。至少在iOS 5.1上的Safari上,此问题已修复。你的FastClick是有效的,也就是说,合成一个点击事件不会失败。然而,这并不能帮助那些希望自己的单个focus()代码在所有iOS版本上工作的人,叹息。

我能够通过将.focus()附加到事件映射中的两个独立事件来使其工作,但这有点棘手。

添加FastClick.js后,这就是iOS中发生的情况:.focus()只有在被附加到事件的函数激活时才有效。但是focus也是mobilesafari的事件映射中的一个事件,当你使用jQuery的.focus()时,它实际上是被调用的。所以你可以是多余的,并在对象的焦点事件上附加另一个.focus),以确保它通过。当您在DOM中创建输入时,这种方法尤其有效。我最近喜欢为MeteorJS编程,这就是那里的解决方案:

Template.templateName.events({
    "click button":function(){
        Session.set("makeButtonVisible",true);
        $("input.created").focus();
    },
    "focus input.created":function(){
        $("input.created").focus();
    }
});

希望这对外面的人有用,我花了大约两个小时才弄清楚这一点。

编辑:特别是对于MeteorJS,您也不能使用Template.templateName.rendered函数,因为.focus()必须从事件中调用。但出于某种原因,当您通过jQuery添加输入时,您可以在事件中关注它。我想这就是该走的路。这就是我最终所做的:

Template.templateName.events({
    "click button":function(){
        $("body").append("<input class='created' type='tel'>");
        $("input.created").focus();
    }
});

你自己回答了。如果使用Jquery,则只需要触发器。更改触发器上的焦点()("焦点");在代码的任何部分。

$("#searchField").trigger("焦点");

相关内容

  • 没有找到相关文章

最新更新