javascript - 如何在iOS的Ionic电容器中为登录表单打开Webview自动完成功能？(How do I turn on the webview autocomplete for an login form in Ionic's capacitor in iOS?)

Question

I want to know how to enable the autocomplete for a login form in Capacitor (or if it's possible).(我想知道如何在Capacitor中启用登录表单的自动填充功能（或者如果可能的话）。)

I'm using Ionic React.(我正在使用Ionic React。) It works if access the page in Safari on iOS and even if you pin it to the home screen.(即使在iOS上的Safari中访问该页面，即使将其固定到主屏幕，也可以使用。) But if you bundle the web app in Capacitor, the autocomplete is not there.(但是，如果将Web应用程序捆绑在Capacitor中，则自动完成功能将不存在。) Here's the code for the login form:(这是登录表单的代码：)

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

I've also tried setting autocomplete="on" as well and it didn't work.(我也尝试过将autocomplete="on"设置为无效，但这没有用。)

Apple's documentation recommends using the values posted above: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element(Apple的文档建议使用上面发布的值： https : //developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element)

Here's a screenshot of the login page on the web:(这是网络上登录页面的屏幕截图：)

Here's a version of the login form in Capacitor:(这是电容器中登录表单的版本：)

Notice the passwords option in the above the keyboard is gone.(请注意，键盘上方的密码选项已消失。)

Why is that?(这是为什么？)

Here's the relevant dependencies of my project:(这是我项目的相关依赖项：)

"@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",

I'm using iOS version 12.4.2(我正在使用iOS版本12.4.2)

EDIT:(编辑：)

I've done some more research.(我做了更多的研究。)

There this documentation from Apple.(那里有苹果公司的这份文件。) The relevant section is this:(相关部分是这样的：)

Enable Password AutoFill(启用密码自动填充)

Password AutoFill uses heuristics to determine when the user logs in or creates new passwords, and automatically provides the password QuickType bar.(密码自动填充使用启发式方法确定用户何时登录或创建新密码，并自动提供密码快速输入栏。)

These heuristics give users some Password AutoFill support in most apps, even if those apps haven't been updated to support AutoFill.(这些启发式方法为用户提供了大多数应用程序中的一些密码自动填充支持，即使这些应用程序尚未更新为支持自动填充也是如此。) However, to provide the best user experience and ensure your app fully supports Password AutoFill, perform the following steps:(但是，为了提供最佳的用户体验并确保您的应用程序完全支持密码自动填充，请执行以下步骤：)

1. Set up your app's associated domains.(设置您应用的关联域。)

   To learn how to set up your app's associated domains, see Setting Up an App's Associated Domains.(要了解如何设置应用程序的关联域，请参阅设置应用程序的关联域。)

2. Set the correct AutoFill type on relevant text fields.(在相关文本字段上设置正确的自动填充类型。)

   For an iOS app, see Enabling Password AutoFill on a Text Input View.(对于iOS应用，请参阅在文本输入视图上启用密码自动填充。) For a web app, see Enabling Password AutoFill on an HTML Input Element.(对于Web应用程序，请参阅在HTML Input Element上启用密码自动填充。)

I did 2 from above when I first asked this question, but not 1. However after doing number 1 it's still not working.(当我第一次问这个问题时，我是从上面做2个，但是没有做1个。但是在做完第1个之后，它仍然不起作用。)

Here's some more relevant documentation from Apple.(这是Apple提供的一些更相关的文档。)

  ask by CovertIII translate from so

Answer 1

I've tried everything as well, name=username or name=current-password, autocomplete="current-password" and autocomplete="username", autocomplete="on", etc. I can get the Password button on the keyboard to display only in the Password field, allow me to select a prior saved account (User Name, Password, Web Site), but it only fills in the password not the username field.(我也尝试了所有方法，例如name = username或name = current-password，autocomplete =“ current-password”和autocomplete =“ username”，autocomplete =“ on”等。我可以通过键盘上的“密码”按钮来仅在“密码”字段中显示，请允许我选择一个先前保存的帐户（“用户名”，“密码”，“网站”），但它仅填写密码，而不填写“用户名”字段。)

So try to go into setting Password & Accounts, turn on AutoFill Password "Green", then Website & App Passwords, and input account info.(因此，尝试进入设置“密码和帐户”，打开“自动填充密码”“绿色”，然后打开“网站和应用程序密码”，然后输入帐户信息。)

But I have two outstanding issues, 1.) will not prompt me for username autocomplete in the username field.(但是我有两个未解决的问题，1.）在用户名字段中不会提示我用户名自动完成。)

2.) has no domain for my app to related the account to my app.(2.）没有用于我的应用程序的域来将该帐户关联到我的应用程序。) This technically odd... the issue seems to be within the Ionic Framework;(从技术上来说这很奇怪……问题似乎在离子框架内；) Ionic 4.(离子4。)

References:(参考文献：)

https://ionicframework.com/docs/api/input(https://ionicframework.com/docs/api/input)

https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element(https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element)

System:(系统：)

ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)(ionic（Ionic CLI）：4.12.0（/ usr / local / lib / node_modules / ionic）)

Ionic Framework : @ionic/angular 4.7.1(离子框架：@ ionic / angular 4.7.1)

@angular-devkit/build-angular : 0.13.9(@ angular-devkit / build-angular：0.13.9)

@angular-devkit/schematics : 7.3.9(@ angular-devkit / schematics：7.3.9)

@angular/cli : 7.3.9(@ angular / cli：7.3.9)

@ionic/angular-toolkit : 1.5.1(@ ionic / angular-toolkit：1.5.1)

IOS:(iOS：)

12.1(12.1)