如何在 iOS 的 Ionic 电容器中打开登录表单的 webview 自动完成功能？

Question

我想知道如何为 Capacitor 中的登录表单启用自动完成功能（或者如果可能的话）。我正在使用离子反应。如果在 iOS 上的 Safari 中访问页面，即使您将其固定到主屏幕，它也可以工作。但是，如果您将 Web 应用程序捆绑在 Capacitor 中，则自动完成功能不存在。这是登录表单的代码：

<form onSubmit={e => loginAndCloseModal({e, emailValue, passwordValue})}>
  <IonList>
    <IonItem>
      <IonLabel position="stacked">Email</IonLabel>
      <IonInput autocomplete="username" name="email" value={emailValue} onIonChange={e => setEmail(e.target.value)}></IonInput>
    </IonItem>
    <IonItem>
      <IonLabel position="stacked">Password</IonLabel>
      <IonInput autocomplete="current-password" name="password" type="password" value={passwordValue} onIonChange={e => setPassword(e.target.value)}></IonInput>
    </IonItem>
    { errorMessage &&
        <IonItem>
          <IonNote color="danger">{errorMessage}</IonNote>
        </IonItem> }
  </IonList>
  <IonButton class="login-button" expand="block" type="submit" disabled={authLoading}>Login</IonButton>
</form>

我也试过设置autocomplete="on"，没用。Apple 的文档建议使用上面发布的值：https : //developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

这是网络上登录页面的屏幕截图：

这是 Capacitor 中登录表单的一个版本：

请注意键盘上方的密码选项消失了。这是为什么？

这是我的项目的相关依赖项：

"@capacitor/cli": "^1.2.1",
"@capacitor/core": "^1.2.1",
"@capacitor/ios": "^1.2.1",
"@ionic/react": "^4.11.2",
"@ionic/react-router": "^4.11.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",

我使用的是 iOS 版本 12.4.2

编辑：

我做了更多的研究。有这个苹果文档。相关部分是这样的：

启用密码自动填充

密码自动填充使用启发式方法来确定用户何时登录或创建新密码，并自动提供密码 QuickType 栏。这些启发式方法在大多数应用程序中为用户提供了一些密码自动填充支持，即使这些应用程序尚未更新为支持自动填充。但是，为了提供最佳用户体验并确保您的应用完全支持密码自动填充，请执行以下步骤：

1. 设置应用的关联域。要了解如何设置应用的关联域，请参阅设置应用的关联域。

2. 在相关文本字段上设置正确的自动填充类型。对于 iOS 应用程序，请参阅在文本输入视图上启用密码自动填充。对于 Web 应用程序，请参阅在 HTML 输入元素上启用密码自动填充。

当我第一次问这个问题时，我从上面做了 2，但不是 1。但是在做了 1 之后它仍然不起作用。

这是来自 Apple 的一些更相关的文档。

Answer 1

我在这里找到了解决方法：https ://github.com/ionic-team/ionic/issues/19478#issuecomment-559081576

基本上不要将任何输入字段包装在 ion-item 标签中，而是使用 div （例如）。

对应的WebKit bug报告是这样的：https://bugs.webkit.org/show_bug.cgi ?id=203299