在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基于一些基本的用户代理测试使用的方法:
如果还没有,则应继续进行操作,并通过https://bugreport.apple.com向Apple提交雷达报告。