Chrome警告“[DOM]密码表单应具有(可选隐藏)用户名字段以便于访问”,即使隐藏了用户名字段

vawmfj5a  于 2023-09-28  发布在  Go
关注(0)|答案(8)|浏览(198)

当访问我的单页应用程序的“重置密码”路径并查看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上。*
k7fdbhmy

k7fdbhmy1#

我也有同样的问题。经过一番挖掘,我发现它需要是一个input元素,类型为text。“可选隐藏”的意思是你可以用CSS隐藏它。
如果你只是添加一个名为emailusernameinput Chrome会给你另一个警告,说input元素应该有autocomplete属性。这就是我用来修复这些错误的方法:

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

您需要手动将实际的用户名或电子邮件呈现到elements值属性中。
另外,请记住,内联样式不是一个很好的实践。

wz1wpwve

wz1wpwve2#

使用hidden属性而不是type="hidden"

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

gkn4icbw3#

我也遇到过同样的情况。一切似乎都很好,但我仍然得到了这个冗长。
在我的情况下,帮助我重新定位这个userName输入从表单的末尾到开始。
这是我修改之前的代码:

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

p1tboqfb4#

你必须把输入标签放在另一个标签中,例如:

<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,我尝试将input标签放入new标签中,这对我来说很有效

6yjfywim

6yjfywim5#

虽然我知道这个问题已经很老了,但我想它可能对某些人有用。我在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>
fslejnso

fslejnso6#

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

icnyk63a

icnyk63a7#

我在控制台中显示了相同的警告,这是我如何修复它的:

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

rsaldnfx8#

我使用了最新版本的Chrome(2023年9月),我需要几个单独答案的元素来获得警告:

  • 隐藏元素必须在顶部,而不是底部
  • 必须是type="text";在我的例子中,我添加了hidden属性,它工作了(没有尝试隐藏样式)
  • 它必须有autocomplete="username"

上面任何一个失踪,我得到了警告。

相关问题