javascript-在iOS8中使用.focus()会在触摸后显示虚拟键盘并滚动页面

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

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

我假设这是iOS8中的错误,而不是有意的功能,我的问题是解决此问题的最有效解决方案是什么?

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

Mac Mad Ill asked 2020-02-22T21:09:39Z
7个解决方案
30 votes

看来您肯定是在遇到iOS 8错误。 在iOS7中,Safari会(显然)忽略或保留在页面加载之前已设置焦点的未聚焦元素。 其中包括input.focus()input.focus(),它们都发生在某个点上,甚至可能是页面加载(我仅使用内联脚本进行了测试)。

在iOS 8中,Safari现在显然记得该元素已被聚焦,但直到触地事件才真正聚焦。 然后,它盲目地将click事件发送到接收到修饰的任何元素。

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

测试:

  • input.focus()在页面加载之前:[http://fiddle.jshell.net/qo6ctnLz/3/show/]
  • input.focus(): [HTTP://fiddle.假设理论.net/去哦6出头鸟LZ/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.cn]向Apple提交雷达报告。

Brian Nickel answered 2020-02-22T21:10:52Z
21 votes

如果您正在开发Cordova项目,则可以在添加此行后对其进行修复

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

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

Del answered 2020-02-22T21:11:17Z
4 votes

在iOS 8中,似乎对javascript focus()命令的默认处理方式进行了API更改。 如果您的应用程序是混合应用程序,并且您可以直接控制Apple的Web视图外观,则以下内容直接来自apples文档。

一个布尔值,指示网站内容是否可以通过编程方式   显示键盘。

[myWebView setKeyboardDisplayRequiresUserAction:YES];

当此属性设置为YES时,用户必须明确点击   Web视图中显示键盘(或其他相关元素)的元素   输入视图)。 设置为“否”时,   元素使输入视图得以显示并与其关联   元素自动。

此属性的默认值为YES。

从最后一段看来,此方法调用并非严格针对键盘。 它指示它用于全面输入视图,即下拉菜单和日期选择器等。

似乎有一个错误,因为此方法调用当前不适用于我。 我收到的当前行为与默认情况下的默认值相同。

xMythicx answered 2020-02-22T21:12:05Z
1 votes

我有一个解决方案:

  1. 禁用所有输入
  2. 启用您要关注的输入
  3. 将焦点设置为该输入
  4. 重新启用所有其他输入
Diodeus - James MacFarlane answered 2020-02-22T21:12:42Z
1 votes

这是针对arguments[0]的有条件的猴子补丁,因此您无需在任何地方添加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()

Adam Fraser answered 2020-02-22T21:13:15Z
0 votes

我已将有关此问题的错误记录到Apple Bug Reporter中,并以重复的形式将其关闭,这表明他们正在努力解决此问题。 不幸的是,他们没有给我更多有关重复项或问题本身的信息。 我只能看到重复的项目状态,即“打开”。

Lipata answered 2020-02-22T21:13:35Z
0 votes

对于2018年参加此活动的任何人,都有一个可修复此问题的插件。 只需安装此[https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix],则2759320708810540040032将自动工作,无需进行任何其他工作。

Ahmad Alfy answered 2020-02-22T21:13:56Z
translate from https://stackoverflow.com:/questions/26146252/in-ios8-using-focus-will-show-virtual-keyboard-and-scroll-page-after-touch