在iOS8中使用.focus()会在触摸后显示虚拟键盘和滚动页面

Question

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

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

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

navigator.userAgent每次使用该.focus()方法时,是否必须检查设备是否为iOS8 ？

Answer 1

看起来你肯定遇到了iOS 8的bug.在iOS7中,Safari会(显然)忽略或保持在页面加载之前设置焦点的未聚焦元素.这包括两者<input autofocus>和input.focus()某些点,可能是页面加载(我只使用内联脚本测试).

在iOS 8中,Safari现在显然已经记住了该元素是专注的,但实际上并没有将其聚焦到触地事件之前.然后盲目地向接收到触摸的任何元素发送点击事件.

两种浏览器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提交雷达.

Answer 2

如果您正在开发Cordova项目,则可以通过添加此行来修复它

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

到你的config.xml文件.在IOS 8.3和IOS 8.4中测试过