在iOS8中使用.focus()会在触摸后显示虚拟键盘和滚动页面
在iOS8之前,在input元素上使用Javascript .focus()
方法似乎不起作用(虚拟键盘不会显示)。 在最新的iOS 8发行版之后,运行.focus()
方法似乎对页面加载没有任何影响,但是一旦用户触摸了屏幕上的任何位置,虚拟键盘就会立即出现,并将页面滚动到焦点的元素上。 (当我使用HTML属性“自动对焦”时,这也是一个问题)
此更改已导致我的网站上的iOS8用户出现问题。 当用户尝试点击我的页面上的button时,突然滚动和键盘外观导致他们无意中单击屏幕上较低的button。
我假设这是在iOS8中的错误,而不是故意的function,我的问题是什么是解决这个问题的最有效的解决scheme?
每次使用.focus()
方法时,是否必须检查navigator.userAgent
以查看设备是否为iOS8?
看起来你肯定是碰到一个iOS 8的错误。 在iOS7中,Safari会(显然)忽略或保留页面加载之前焦点已设置的未聚焦的元素。 这包括发生在某个点上的<input autofocus>
和input.focus()
,可能是页面加载(我只是用一个内联脚本testing过)。
在iOS 8中,Safari现在显然记得元素是被聚焦的,但是直到触碰事件才被真正地聚焦。 然后盲目地发送一个点击事件给接触到的那个元素。
这两个浏览器在加载页面后发生的input.focus()
行为相同。 他们都放大到元素和调出键盘。
testing:
- 在页面加载之前的
input.focus()
: http :input.focus()
-
<input autofocus>
: http : //fiddle.jshell.net/qo6ctnLz/4/show/ -
input.focus()
页面加载后: http :input.focus()
好消息是,你只需要担心你想要聚焦的元素的新行为。 另一个好消息是,虽然您将不得不使用用户代理解决方法,但您可以将其用于所有iOS版本,因为它们已经像您不自动对焦一样运行:
if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) { element.focus(); }
这似乎是http://www.google.com基于一些基本的用户代理testing使用的方法:;
- Mac Book Pro:页面加载之前的自动对焦。
- iPhone:没有自动对焦
- iPad:没有自动对焦
- Kit Kat(Android): 在页面加载后关注,可能会对软件键盘的存在做额外的检测。
如果你还没有,你应该继续在https://bugreport.apple.com上向苹果提供雷达。;
如果你正在开发一个Cordova项目,你可以修改它添加这一行
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
到你的config.xml
文件。 在IOS 8.3和IOS 8.4中testing
看来,在iOS 8中,JavaScript焦点()命令的默认处理已经发生了API更改。 如果您的应用程序是一个混合的应用程序,您可以直接控制苹果的Web视图外观下面是直接从苹果文档。
一个布尔值,指示Web内容是否可以编程方式显示键盘。
[myWebView setKeyboardDisplayRequiresUserAction:YES];
当此属性设置为YES时,用户必须明确点击Web视图中的元素以显示该元素的键盘(或其他相关input视图) 。 设置为NO时,元素上的焦点事件会导致input视图被自动显示并与该元素相关联。
该属性的默认值是YES。
从最后一段看来,这个方法调用并不是严格的键盘。 它表示它是为了全面的input意见,即下拉和dateselect器等。
看来虽然有一个错误,因为这个方法调用目前不适用于我。 我收到的当前行为对应于默认为NO。
我有一个解决scheme:
- 禁用所有input
- 启用您想要关注的input
- 将焦点设置为该input
- 重新启用所有其他input
这是jQuery.focus
的条件monkeypatch,所以你不需要在任何地方添加userAgenttesting。
JavaScript的
if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) { (function($) { return $.fn.focus = function() { return arguments[0]; }; })(jQuery); }
CoffeeScript的
if /iPad|iPhone|iPod/g.test navigator.userAgent (($) -> $.fn.focus = -> arguments[0] )(jQuery)
注意:我返回arguments[0]
所以我们不打破方法链接,如$(el).focus().doSomethingElse()
我已经在Apple Bug Reporter中logging了一个关于这个问题的bug,他们把它作为重复来closures,这是他们正在解决这个问题的标志。 不幸的是,他们没有给我更多关于重复项目或关于问题本身的信息。 我只能看到重复的项目状态,即打开。