在iOS8中使用.focus（）会在触摸后显示虚拟键盘和滚动页面 [英] in iOS8 using .focus() will show virtual keyboard and scroll page after touch

问题描述

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

Prior to iOS8, using the Javascript .focus() method on an input element would appear to have no effect (the virtual keyboard would not display). After the latest iOS 8 release, running the .focus() method seemed to have no effect on page load but once a user touched anywhere on the screen the virtual keyboard would instantly appear and scroll the page to the element in focus. (This is also an issue when I use the HTML attribute "autofocus")

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

This change has caused issues with iOS8 users on my site. When a user attempts to click a button on my page the sudden scroll and keyboard appearance causes them to unintentionally click a button that was lower on the screen.

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

I am assuming this is a bug in iOS8 and was not intentional feature, my question is what is the most efficient solution to fixing this problem?

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

Do I have to check navigator.userAgent to see if the device is iOS8, every time I use the .focus() method?

推荐答案

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

It looks like you're definitely hitting an iOS 8 bug. In iOS7, Safari would (apparently) ignore or keep unfocused elements that had focus set prior to page load. This includes both <input autofocus> and input.focus() that occur up to some point, possibly page load (I tested just with an inline script).

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

In iOS 8, Safari is now apparently remembering that the element was focussed but not actually focussing it until a touch down event. It is then blindly sending a click event to whichever element received the touch up.

两个浏览器对于 input.focus（）的行为相同。它们都缩放到元素并调出键盘。

Both browsers behave the same for input.focus() occurring after page load. They both zoom to the element and bring up the keyboard.

测试：

• 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 /

• input.focus() before page load: http://fiddle.jshell.net/qo6ctnLz/3/show/
• <input autofocus>: http://fiddle.jshell.net/qo6ctnLz/4/show/
• input.focus() after page load: http://fiddle.jshell.net/qo6ctnLz/6/show/

好消息是你只需要担心要预先聚焦的元素的新行为。另一个好消息是，虽然您必须使用用户代理解决方法，但您可以将它用于所有iOS版本，因为它们的行为就像您没有自动对焦一样：

The good news is that you only need to be worried about new behavior on elements you want to prefocus. The other good news is that while you will have to use a user-agent workaround, you can use it for all iOS versions since they were already behaving like you weren't autofocusing:

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
    element.focus();
}

这似乎是方法 http://www.google.com 基于一些基本的用户代理测试使用：

This appears to be the approach http://www.google.com uses based on some basic user-agent testing:

• Mac Book Pro：页面加载前自动对焦。


• iPhone：无自动对焦


• iPad：无自动对焦


• Kit Kat（Android）：在页面加载后关注，可能会对软件键盘的存在进行额外检测。

• Mac Book Pro: autofocus before page load.
• iPhone: no autofocus
• iPad: no autofocus
• Kit Kat (Android): focus after page load, possibly doing extra detection for presence of software keyboard.

如果还没有，你应该继续在 https://bugreport.apple.com 上向Apple提交雷达。

If you haven't, you should go ahead and file a radar with Apple at https://bugreport.apple.com.

这篇关于在iOS8中使用.focus（）会在触摸后显示虚拟键盘和滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！