即使隐藏了用户名字段，在Chrome控制台中仍会出现“[DOM]密码表单应该具有（可选隐藏的）用户名字段以便辅助访问”的警告。

Question

当访问我的单页面应用程序的“重置密码”路由并查看Chrome浏览器控制台时，我会收到以下警告：

[DOM]密码表单应具有（可选隐藏的）用户名字段以实现辅助功能：（更多信息：goo.gl/9p2vKq）

令人高兴的是，接下来一行中也打印了相关表单的html，并且很明显包含一个隐藏的用户名字段：

<form data-ember-action data-ember-action-436=​"436">​
  <div class=​"form-group">
    <label for=​"newpasswordone">​Password​</label>​
    <input type=​"password" autocomplete=​"new-password" placeholder=​"Enter your new password" id=​"ember437" class=​"form-control ember-text-field ember-view" data-op-id=​"0">​
    <label for=​"newpasswordtwo">​Password (again)​</label>
    ​<input type=​"password" autocomplete=​"new-password" placeholder=​"Re-enter your new password" id=​"ember438" class=​"form-control ember-text-field ember-view" data-op-id=​"1">​
    <input type=​"hidden" name=​"username" autocomplete=​"username" value=​"a_b">
  ​</div>​
  <button disabled type=​"submit" class=​"btn btn-default">​Reset password​</button>​​
</form>​

我尝试了一些小变化--取消隐藏用户名字段，将其标记为只读，将其移出div--但没有影响警告。 Chrome希望如何接收用户名？

Chrome 63和64会出现此问题。

- arne.b

---

类似但针对Angular的问题：https://dev59.com/lKjka4cB1Zd3GeqPCKig?rq=1 - rmcsharry

Answer 1

我也遇到了同样的问题。经过一番探索，我发现需要使用带有type为text的input元素。所谓“可选隐藏”，意思是你可以在CSS中将其隐藏。

如果你只添加一个name为email或username的input元素，Chrome会提示你另一个警告，指出input元素应该具有自动完成属性。因此，我想到了以下解决方法来解决这些错误：

<input
  type="text"
  name="email"
  value="..."
  autocomplete="username email"
  style="display: none;"
>

您需要手动将实际的用户名或电子邮件呈现到元素值属性中。

此外，请注意，内联样式不是一个很好的做法。

- Jonas

---

谢谢。听起来很有道理，但不幸的是，将输入类型更改为文本（甚至是“用户名”）并未更改警告消息（当然除了复制的HTML节点内容），即使我不隐藏该字段。 :-( - arne.b

我的表单中确实有这样的字段，即使它现在没有被隐藏，但仍然出现了这个错误 :/ https://i.postimg.cc/7Z81vcgD/Screenshot-at-Apr-26-14-41-29.png - Luckylooke

使用type="text"的输入框并将其视觉上隐藏似乎可以正常工作（在Chrome 91中），因为内置密码管理器提示保存密码以及正确的用户名，但请注意控制台仍会出现警告。看起来Chrome将警告显示为任何密码重置表单的一般建议，无论它是否实际包含用户名字段。 - Ade

我的表单是一个密码重置表单。它没有，也不需要任何“用户名”输入。重置请求由唯一令牌标识。在表单的HTML中添加无用的输入“以提高可访问性”（嗯？）似乎是毫无意义的。或者我在这里漏掉了什么重要的东西吗？ - silverdr

@silverdr Chrome和其他浏览器在表单上提供创建复杂密码的选项，但如果没有用户名，它无法将其保存到密码列表中。因此，添加隐藏的用户名字段可以为浏览器提供在登录页面上输入什么内容的上下文。 - Sarfaraaz

Answer 2

使用hidden属性替代type="hidden"

<input hidden type="text" autocomplete="username" value="{{...}}">

- Yann Dìnendal

Answer 3

我曾遇到类似的情况。一切看起来都很正常，但仍然出现了冗长的报错信息。

在我的情况下，将用户名输入框从表单末尾移动到开头解决了问题。

以下是我修改前的代码：

<form id="changePass">
    <div class='modal-dialog'>
       <input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>

       <div class="modal-footer">
          <button type="button" id="change-password-ok-button">Ok</button>
          <button type ="button" data-dismiss="modal">Close</button>
       </div>
   </div>
   <input id="userName" name="username" autocomplete="username" value="">
</form>

以下是当前代码：

<form id="changePass">
   <input id="userName" name="username" autocomplete="username" value="">
   <div class='modal-dialog'>
       <input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>

       <div class="modal-footer">
          <button type="button" id="change-password-ok-button">Ok</button>
          <button type ="button" data-dismiss="modal">Close</button>
       </div>
   </div>
</form>

- Presto

---

将隐藏字段移到表单顶部对我来说解除了警告。 - evolross

感谢evolross，在密码字段后添加用户名字段没有意义，应该将用户名字段放在密码字段之前。 - Dee

Answer 4

虽然我知道这个问题已经很老了，但是想着也许对某些人有用。我在更新React应用程序用户密码时遇到了同样的问题，并且这个方法对我有效，只需在没有标签的密码字段上方使用即可。抱歉我用React的方式来写。

<input hidden type='text' name='email' autoComplete='email' />

基本用法：-

<form>
 <input hidden type='text' name='email' autoComplete='email' />
 <label htmlFor="oldPass">Enter your current password</label>
 <input id="oldPass" type="password" />
 <label htmlFor="newPass">Enter your new password</label>
 <input id="newPass" type="password" />
</form>

- KUSHAD

Answer 5

你必须将输入标签放在另一个标签内，例如：

  <form action="">
<div>
  <input type="text" autocomplete="username">
</div>
<div>
  <input type="password" autocomplete="password">
</div>
<div>
  <input type="password" autocomplete="password">
</div>

当我在VueJs中使用条件渲染的v-if和v-else，尝试将输入标签放在新的<span>标签中时，我遇到了相同的情况，并且这对我起作用了。

- Faza Aulia Rosyadan

---

运行得非常好，只需将其包装在<form>中即可。在提到输入应具有自动完成功能后，您可能会遇到另一个错误 - 只需将autoComplete =“off”或“on”添加到您的输入中，如果您喜欢的话。 - Nick Sherman

Answer 6

关于这个警告还有一件事：用户名字段必须在密码字段之前。如果我将用户名字段放在密码字段之后，这个消息就会保留。

如果正确放置，这对我起作用。

<input type="text" name="username" autocomplete="username" style="display: none;"/>

- Adrian

Answer 7

我试玩了最新版本的Chrome（2023年9月），为了消除警告，我需要使用几个不同答案的元素：

• 隐藏元素必须位于顶部，而不是底部
• 它必须是type="text"；在我的情况下，我添加了hidden属性，它起作用了（没有尝试隐藏样式）
• 它必须有autocomplete="username"

以上任何一个缺失，我都会收到警告。

- gwd

Answer 8

在阅读了Jonas的评论后，我重新构建了项目，警告消失了。

- Federica Oltolina

Answer 9

我在控制台中看到了同样的警告，这是我解决它的方法：

<input hidden autocomplete="username" name="username" type="text" value="{{..}}"/>
<input hidden autocomplete="email" name="email" type="text" value="{{..}}"/>

- Yaman Abd