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或usernamechrome,则会给你另一个警告,说明input元素应该具有自动完成属性.所以这就是我想出来解决这些错误的方法:

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

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

另外,请记住,内联样式不是一个很好的做法.

Answer 2

I had this same situation. Everything seemed be ok but I still got this verbose.

On my case helped me a relocate this userName input from end of form to begin of that.

It was my code before my changes:

<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>

And this is current code:

<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 3

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

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