的JavaScript

Question

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

时，这也是一个问题

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

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

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

Answer 1

看起来您肯定会遇到iOS 8错误。在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中进行了测试

Answer 3

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

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

[myWebView setKeyboardDisplayRequiresUserAction：YES];

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

此属性的默认值为YES。

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

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

Answer 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中，他们将其关闭为重复，这是他们正在努力修复此问题的一个标志。不幸的是，他们没有给我更多关于重复项目或问题本身的信息。我只能看到重复的项目状态，即打开。

Answer 7

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

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

7 个答案:

的JavaScript

的CoffeeScript