在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:

  1. 禁用所有input
  2. 启用您想要关注的input
  3. 将焦点设置为该input
  4. 重新启用所有其他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,这是他们正在解决这个问题的标志。 不幸的是,他们没有给我更多关于重复项目或关于问题本身的信息。 我只能看到重复的项目状态,即打开。