Cordova应用中HTML表单设autocomplete仍无法保存密码的问题

我希望在Cordova应用中实现类似Chrome浏览器的密码保存功能，开发使用Quasar框架。以下是我的表单代码：

<q-form @submit="soumettre">
      <q-card flat>
        <q-card-section class="row q-col-gutter-sm">
          <q-input
            v-model="email"
            class="col-12"
            label="Email"
            icon="mail"
            type="email"
            autocomplete="username"
          />
          <champs-texte
            v-model="password"
            class="col-12"
            label="Password"
            icon="key"
            type="password"
            autocomplete="current-password"
          />
        </q-card-section>
        <q-card-actions>
          <btn
            label="Connect"
            type="submit"
          />
        </q-card-actions>
      </q-card>
    </q-form>

在Chrome浏览器中会弹出保存密码的弹窗，但Cordova应用中无此提示。我已尝试设置autocomplete属性和原生HTML表单，请问该如何解决？

• 配置Cordova WebView启用密码保存支持
  Cordova WebView默认可能未开启触发密码保存的机制，需针对平台配置：

  • Android：在config.xml中添加以下配置，模拟Chrome UA并开启相关权限：

    <preference name="OverrideUserAgent" value="Mozilla/5.0 (Linux; Android 10; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.105 Mobile Safari/537.36" />
    <preference name="AndroidInsecureFileModeEnabled" value="true" />
    

    同时确保应用目标SDK版本在Android 10及以上。
  • iOS：在config.xml中开启文件访问权限：

    <preference name="AllowFileAccessFromFileURLs" value="true" />
    <preference name="AllowUniversalAccessFromFileURLs" value="true" />
    

    并在Info.plist中添加自动填充权限说明：

    <key>NSAutoFillUsageDescription</key>
    <string>需要访问密码自动填充功能以简化登录流程</string>
    

• 用原生HTML表单替代封装组件测试
  Quasar的封装组件可能导致系统无法识别标准登录表单结构，先尝试用原生表单测试：

  <form @submit="soumettre">
    <q-card flat>
      <q-card-section class="row q-col-gutter-sm">
        <input
          v-model="email"
          class="col-12 q-input"
          type="email"
          autocomplete="username"
          placeholder="Email"
        />
        <input
          v-model="password"
          class="col-12 q-input"
          type="password"
          autocomplete="current-password"
          placeholder="Password"
        />
      </q-card-section>
      <q-card-actions>
        <button type="submit" class="q-btn">Connect</button>
      </q-card-actions>
    </q-card>
  </form>
  

  确认原生表单能触发提示后，再逐步还原Quasar样式。

• 模拟原生表单提交行为
  若登录逻辑是异步请求（如axios调用），系统可能无法感知登录成功状态。可在登录成功后模拟原生提交：

  async function soumettre() {
    const loginSuccess = await api.login(email, password);
    if (loginSuccess) {
      const hiddenForm = document.createElement('form');
      hiddenForm.method = 'POST';
      hiddenForm.action = '/dummy-login';
      hiddenForm.style.display = 'none';
      document.body.appendChild(hiddenForm);
      hiddenForm.submit();
      document.body.removeChild(hiddenForm);
    }
  }
  

• 检查自定义组件champs-texte的属性传递
  确认champs-texte组件内部是否将autocomplete="current-password"、type="password"等属性正确绑定到原生<input>元素，确保系统能识别这是密码输入字段。

内容的提问来源于stack exchange，提问作者François Schuster