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 出现问题。

Answer 1

我也有同样的问题。经过一番挖掘，我发现它需要是一个类型为

input

的

text

元素。 “可选隐藏”意味着您可以使用 CSS 隐藏它。

如果您只是添加一个名为

input

或

email

的

username

，chrome 会给您另一个警告，指出

input

元素应该具有自动完成属性。这就是我想出的方法来修复这些错误：

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

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

另外，请记住，内联样式并不是一个很好的做法。

Answer 2

使用

hidden

属性而不是

type="hidden"

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

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>

Answer 4

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

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

当我使用渲染条件 v-if v-else 时，我在 VueJs 中遇到了同样的情况，我尝试将输入标签放入新标签中，这对我有用

Answer 5

虽然我知道这个问题已经很老了，但我认为它可能对某人有用。我的 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>

Answer 6

阅读Jonas评论后，我重建了项目，警告消失了

Answer 7

我在控制台中显示了相同的警告，这就是我修复它的方法：

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

Answer 8

我使用了最新版本的 Chrome（2023 年 9 月），我需要几个单独答案的元素才能让警告消失：

• 隐藏元素必须位于顶部，而不是底部
• 必须是

  type="text"

  ；就我而言，我添加了

  hidden

  属性并且它起作用了（没有尝试隐藏样式）
• 它必须有

  autocomplete="username"

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