Chrome 的 "save password" 功能将用户名放在不相关的字段中

Question

我有一个用 HTML/PHP 编写的带有登录屏幕的 Web 应用程序。如果 Chrome 用户登录并导航到主页，浏览器会为他们提供保存密码的选项：

我们一些点击 'save' 的用户将看到他们的用户名出现在与登录功能无关的字段中：

输入字段应如下所示。没有任何价值：

这是输入字段的代码：

<input type="text" id="searchInput" autocomplete="disabled" placeholder="Search..." >

根据其他问题，我已经尝试了所有可能的解决方案来通过自动完成属性禁用该字段的任何类型的自动填充，但没有成功。

此外，创建假隐藏字段等解决方案也不起作用（这显然曾经有效，但 Google 发现了这种做法并解决了它）

我怎样才能阻止 Chrome 这样做？

编辑：我已经能够通过将字段最初设置为只读来解决这个问题：

<input type="text" id="searchInput" onfocus="this.removeAttribute('readonly');" readonly autocomplete="disabled" placeholder="Search...">

实际上我不应该为每个字段都这样做。但根据 this，Google Chrome 并不像 CRM 系统那样关心复杂 Web 界面的可用性：

The tricky part here is that somewhere along the journey of the web autocomplete=off become a default for many form fields, without any real thought being given as to whether or not that was good for users. This doesn't mean there aren't very valid cases where you don't want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data.

那么我们这些碰巧在 "minority cases" 上工作的人是不是注定要像上面那样编写 hack 来防止 Chrome 在随机位置插入用户名？

Answer 1

您是否尝试过为登录字段设置自动完成类型？以下内容可能有助于 Chrome 处理这些字段，而这些字段又应该有助于搜索框：

<label for="username">Username</label>
<input type="text" name="username" id="username"
  placeholder="Username" required autocomplete="username">

<label for="password">Password</label>
<input type="password" name="password" id="password"
  placeholder="Password" required autocomplete="current-password">

此 Google 表单开发指南包含有关将元数据添加到输入字段的更多信息：https://developers.google.com/web/fundamentals/design-and-ux/input/forms/#use_metadata_to_enable_auto-complete

Chrome 的 "save password" 功能将用户名放在不相关的字段中

Chrome's "save password" functionality places a username in an unrelated field

html

google-chrome

autofill