iPhone上的输入焦点问题

Posted 2023-02-24

【中文标题】iPhone上的输入焦点问题

【英文标题】：Input focus issue on iPhone

【发布时间】：2018-08-29 12:29:55

【问题描述】：

首先，在做了一些研究之后，我知道以前与输入字段相关的问题会导致 ios 出现问题。但是，显然这已在 iOS 更新 11.3 中修复。我用于测试的设备是运行 iOS 11.4.1 的 iPhone 5s。

我创建了一个 html 文档（包括 css 和 JS），它存储在 Google Cloud Platform here 上。如果您在 android 或 iPhone 上打开此链接，一切都会按预期显示和工作。

我正在使用AppPresser 创建一个移动应用程序。该应用程序的一个页面会加载 Google Cloud 链接并毫无问题地显示它。 AppPresser 提供了一个可以安装在设备上的预览器应用程序，用于测试当前的应用程序构建。在 Android 设备上，html 页面仍然可以按预期完美运行，但在 iPhone 上进行测试时会出现问题。以下是一些截图：

如果“Purchasing Price”输入集中在屏幕底部，则在为键盘腾出空间时它会移动到顶部。

之前：

之后：

但是，如果“Purchasing Price”输入字段位于屏幕顶部附近并且获得焦点，则一切似乎都变得混乱。容器消失并显示先前的容器。用户看不到他们正在输入的数据。

之前：

之后：

我觉得这个问题很奇怪，尤其是当直接通过浏览器打开 html 页面时，它在 iPhone 上可以完美运行。任何反馈将不胜感激。

谢谢

【参考方案1】：

我以为我已经尝试了在线提供的所有修复，但添加了以下 css：

html,body
   -webkit-overflow-scrolling : touch !important;
   overflow: auto !important;
   height: 100% !important;

来自this article，成功了！我仍然对也许有人可以为我澄清的两件事感到困惑。

为什么这个问题只发生在预览我的应用构建时，而不是直接通过 iPhone 的浏览器加载 html 文件时（文件托管在 Google Cloud Platform 上）。 当输入问题显然已在 iOS 更新 11.3 中得到解决时，为什么我必须对此进行修复