google-chrome - Flutter web 包括自动完成

标签 google-chrome flutter flutter-web

我在 flutter web 中创建了一个登录表单,当我登录时,chrome 检测到输入的密码,但只提供保存密码,而用户名保持空白。

Google 建议使用以下 HTML 表单,以便凭证管理器可以检测需要存储的凭证。

<form id="signup" method="post">
 <input name="email" type="text" autocomplete="username email">
 <input name="display-name" type="text" autocomplete="name">
 <input name="password" type="password" autocomplete="new-password">
 <input type="submit" value="Sign Up!">
</form>

在我的表单中,我同时使用了电子邮件和用户名,但 chrome 凭据管理器仍然无法检测到用户名。

我们如何在flutter web中创建带有自动完成标签的表单?

最佳答案

Flutter 现在支持自动填充(密码、邮箱、用户名等) ☑️ 合并拉取请求示例:https://github.com/flutter/flutter/pull/52126
示例:

 @override
  Widget build(BuildContext context) {
    return AutofillGroup(
      child: Column(
        children: <Widget>[
          TextField(controller: username, autofillHints: [AutofillHints.username]),
          Checkbox(
            value: isNewUser,
            onChanged: (bool newValue) {
              setState(() { isNewUser = newValue; });
            },
          ),
          if (isNewUser) TextField(controller: newPassword, autofillHints: [AutofillHints.newPassword]),
          if (isNewUser) TextField(controller: repeatNewPassword, autofillHints: [AutofillHints.newPassword]),
          if (!isNewUser) TextField(controller: password, autofillHints: [AutofillHints.password]),
        ],
      ),
    );
  }
您可能需要切换到 devmaster channel ( flutter channel master )。

关于google-chrome - Flutter web 包括自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60575967/

相关文章:

css - 使用 css 过渡和不透明度在悬停时闪烁图像

html - 从 Chrome 打印出来的内容不居中

javascript - .scroll() 函数在上次更新后在 google chrome 中定位闪烁

iphone - 在 Windows 10 上使用 VS Code 在 iphone 上调试 flutter

flutter - 小部件测试期间无法加载 Assets SVG

flutter - 更改选项卡时如何获取Flutter ScrollController以保存ListView.builder()的位置?

html - 请求相机权限 Flutter Web

javascript - Chrome jQuery 表单插件跨域安全漏洞?

flutter - 如何在Flutter中用星号替换部分字符串?

flutter - 如何在 Flutter Web 中动态更改 App 标题?