Chrome浏览器的“保存密码”功能将用户名放在不相关的字段中

Question

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

然后，我们某些点击“保存”的用户将看到其用户名出现在与登录功能无关的字段中：

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

这是输入字段的代码：

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

和其他问题一样，我尝试了所有可能的解决方案，以通过autocomplete属性禁用此字段的任何一种自动填充功能，但是没有运气。

此外，创建伪造的隐藏字段之类的解决方案也不起作用（这显然曾经起作用，但是Google发现了这种做法并加以解决）

如何阻止Chrome执行此操作？

编辑：我已经能够解决此问题，方法是将字段最初设置为只读：

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

实际上，我不必为每个领域都这样做。但根据此，谷歌Chrome犯规约复杂的web界面的易用性这么多照顾那些喜欢CRM系统：

这里最棘手的部分是，在整个Web旅程中，某个地方的autocomplete = off成为许多表单字段的默认值，而没有真正考虑过这样做是否对用户有利。这并不意味着在没有非常不希望的情况下，您不希望浏览器自动填充数据（例如，在CRM系统上），但是总的来说，我们将其视为少数情况。因此，我们开始忽略Chrome自动填充数据的autocomplete = off。

因此，我们当中碰巧正在处理“少数群体案件”的人，是否注定要编写类似上述的技巧，以防止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