在iOS8之前,在输入元素上使用Javascript .focus()方法似乎无效(虚拟键盘将不会显示)。在最新的iOS 8版本之后,运行.focus()方法似乎对页面加载没有影响,但是一旦用户触摸屏幕上的任意位置,虚拟键盘就会立即出现并将页面滚动到焦点所在的元素。 (当我使用HTML属性“自动对焦”时,这也是一个问题)

此更改导致我的网站上的iOS8用户出现问题。当用户尝试单击我页面上的按钮时,突然的滚动和键盘外观会导致他们无意中单击屏幕下方的按钮。

我假设这是iOS8中的错误,而不是有意的功能,我的问题是解决此问题的最有效解决方案是什么?

每次我使用navigator.userAgent方法时,是否都需要检查.focus()以查看设备是否为iOS8?

最佳答案

看来您肯定是在遇到iOS 8错误。在iOS7中,Safari显然会忽略或保留在页面加载之前已设置焦点的未聚焦元素。这包括<input autofocus>input.focus(),它们都出现在某个点上,甚至可能是页面加载(我仅使用内联脚本进行了测试)。

在iOS 8中,Safari现在显然记得该元素已聚焦,但直到触地事件才真正聚焦。然后,它盲目地将click事件发送给接收到修饰的任何元素。

对于页面加载后出现的input.focus(),两种浏览器的行为均相同。它们都缩放到元素并调出键盘。

测试:

页面加载之前的

  • input.focus():http://fiddle.jshell.net/qo6ctnLz/3/show/
  • <input autofocus>:http://fiddle.jshell.net/qo6ctnLz/4/show/
  • 页面加载后的
  • input.focus():http://fiddle.jshell.net/qo6ctnLz/6/show/

  • 好消息是,您只需要担心要预聚焦的元素上的新行为即可。另一个好消息是,尽管您将不得不使用用户代理解决方法,但您可以将其用于所有iOS版本,因为它们已经表现出没有自动对焦的效果:
    if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
        element.focus();
    }
    

    这似乎是http://www.google.com基于一些基本的用户代理测试使用的方法:
  • Mac Book Pro:页面加载前自动对焦。
  • iPhone:无自动对焦功能
  • iPad:没有自动对焦功能
  • Kit Kat(Android):页面加载后将焦点对准,可能会对软件键盘的存在进行额外的检测。

  • 如果还没有,则应继续进行操作,并通过https://bugreport.apple.com向Apple提交雷达报告。

    10-06 13:10
    查看更多