为什么Safari移动版在iOS 8上处理多个输入字段时会出现问题？

Question

我有一个包含70个简单文本输入框的页面：

<input class=""  type="text">

iOS 7系统没有问题。但在iOS 8上，选择和输入字段会导致iPad变得缓慢和卡顿。

您可以在jsFiddle中查看此问题的示例。

有人知道如何解决这个问题吗？

- VGruenhagen

---

它也发生在桌面版Safari 11.0.3上。 - Finesse

Answer 1

看起来问题与文档或表单中的文本输入数量有关。

我通过在少量的文本输入周围放置<form>标签来“修复”该问题。

<form>
  <input type="text">
  <input type="text">
  <input type="text">
</form>

<form>
  <input type="text">
  <input type="text">
  <input type="text">
</form>

在某些情况下，我有一些带有单独文本字段的大表格，这些文本字段位于<td>元素中。您不能在表单中包含<tr>或<td>元素，而是必须包含整个<table>或单个<td>元素的内容。在这些情况下，我不得不在每个文本输入周围放置一个<form>元素。

<table>
  <tr>
    <td>
      <form>
        <input type="text">
      </form>
    </td>
    <td>
      <form>
        <input type="text">
      </form>
    </td>
  </tr>
  etc....
</table>

- Design Navigator

---

你知道“设计导航器”吗？我简直想亲口感谢你。它非常好用。 - rickchristie

错误的留言板；-) - Design Navigator

你提供的是Kludge，换句话说就是一个大的hack！虽然混乱但确实解决了问题。这就是为什么我投票并接受它作为答案，以防它对其他人有帮助。 - VGruenhagen

是的，顺便说一下，这不仅仅是Safari的问题，iOS普遍存在这个问题。其他浏览器也会出现同样的问题。幸运的是，这个方法可以解决它。 - dipole_moment

哇，即使在2019年仍然存在问题，但你已经拯救了我的生命。 - Daniel X Moore

Answer 2

更新：这个问题在iOS 8.1.1 beta版本中似乎已经解决了。根据评论，看起来这个问题还没有被修复。:(

---

这个问题也存在于8.1 beta版本中。你应该提交一个radar报告。

一些东西会导致整个网页重新加载或Safari挂起。例如，访问http://getemoji.com/并开始在搜索框中输入。在iOS 8.x设备上，你无法完成此操作而不重新加载页面。

值得注意的是，Chrome和Mercury都可以正常工作，因此你可以建议用户切换到基于UIWebView的第三方浏览器。（我没有测试过WKWebView。）

- Aaron Brager

---

是的，我也注意到它可以在Chrome和其他一些第三方浏览器上运行。不幸的是，强制用户下载另一个浏览器并不是最优解。 - VGruenhagen

我曾经遇到同样的问题，于是我升级了我的设备到8.1.1版本，想看看是否能解决这个问题。但事实证明并没有。或许有一点点改善，但在输入量较大的页面上仍然非常卡顿和缓慢。目前还不确定该怎么办，但我建议其他遇到类似问题的人不要对8.1.1抱有太大的希望。 - Bryce Johnson

8.1.1 无法解决问题。目前，如果用户使用 Safari 并且版本为 8+，我会将他们带到一个页面，告知他们 Safari 目前不支持 IOS 8。如果他们想要使用该服务，必须安装 Google Chrome（或使用台式电脑）。在 Apple 推出修复之前，这似乎是我能做的最好的事情。 - VGruenhagen

一年后仍然遇到这个问题，真的不想把所有输入都包裹在<form>中来解决。 - William Walseth

Answer 3

我在这个问题上挣扎了很多小时，直到在这个页面上找到了解决方案。谢谢！这是我根据Design Navigator提出的建议实施的解决方案：

$(document).ready(function(){    
    var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && !navigator.userAgent.match('CriOS');
    if (isSafari){
      $('#container input[type="text"]').wrap('<form />');
    }
}

- Roman