在iOS8中，使用.focus(）将显示虚拟键盘并在触摸后滚动页面

in iOS8 using .focus() will show virtual keyboard and scroll page after touch

本文关键字：键盘 触摸 滚动 虚拟 iOS8 使用 focus 显示      更新时间：2023-09-26

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

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

我认为这是iOS8中的一个错误，不是故意的，我的问题是解决这个问题最有效的解决方案是什么？

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

看起来你肯定遇到了iOS8错误。在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.

如果你正在开发Cordova项目，你可以通过添加这行来修复它

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

到您的config.xml文件。在IOS 8.3和IOS 8.4中测试

在IOS 8中，似乎对javascript focus（）命令的默认处理进行了API更改。如果你的应用程序是一个混合应用程序，你可以直接控制苹果的网络视图外观，下面的内容直接来自苹果文档。

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

[myWebView setKeyboardDisplayRequiresUserAction:YES]；

当此属性设置为YES时，用户必须明确点击元素以显示键盘（或其他相关输入视图）。当设置为NO时元素导致显示输入视图并将其关联元素。

此属性的默认值为YES。

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

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

我有一个解决方案：

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

这里有一个jQuery.focus的条件猴痘，所以您不需要到处添加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()

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

对于2018年来这里的人来说，有一个插件可以修复它。只需安装https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix并且CCD_ 15将自动工作而不需要任何额外的工作。

相关文章：