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

Question

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

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

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

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

Answer 1

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

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

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

测试：

• 页面加载前的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基于一些基本用户代理测试的方法：

• 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中测试过

Answer 3

似乎在iOS 8中对javascript focus（）命令的默认处理进行了API更改。 如果您的应用程序是一个混合应用程序，您可以直接控制Apple的Web视图外观，则以下内容直接来自apple docs。

一个布尔值，指示Web内容是否可以以编程方式显示键盘。

[myWebView setKeyboardDisplayRequiresUserAction：YES];

当此属性设置为YES时，用户必须显式点击Web视图中的元素以显示该元素的键盘（或其他相关输入视图） 。 设置为NO时，元素上的焦点事件会导致输入视图自动显示并与该元素关联。

此属性的默认值为YES。

从最后一段看来，这种方法调用似乎并不严格用于键盘。 它表示它适用于全面的输入视图，即下拉和日期选择器等。

似乎有一个错误，因为此方法调用目前不适合我。 我收到的当前行为对应，就好像它默认为NO。

Answer 4

我有一个解决方案：

1. 禁用所有输入
2. 启用您想要关注的输入
3. 将焦点设置为该输入
4. 重新启用所有其他输入

Answer 5

这是jQuery.focus的条件monkeypatch，因此您无需在任何地方添加userAgent测试。

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()

Answer 6

我已将有关此问题的错误记录到Apple Bug Reporter中，并将其关闭为重复，这表明他们正在努力修复此问题。 不幸的是，他们没有给我更多关于重复项目或问题本身的信息。 我只能看到重复项状态，即Open。

Answer 7

对于2018年来到这里的人来说，有一个插件可以修复它。 只需安装此https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix，input.focus input.focus()将自动运行，无需任何额外的工作。