当访问我的单页应用程序的“重置密码”路径并查看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上。*
8条答案
按热度按时间k7fdbhmy1#
我也有同样的问题。经过一番挖掘,我发现它需要是一个
input
元素,类型为text
。“可选隐藏”的意思是你可以用CSS隐藏它。如果你只是添加一个名为
email
或username
的input
Chrome会给你另一个警告,说input
元素应该有autocomplete属性。这就是我用来修复这些错误的方法:您需要手动将实际的用户名或电子邮件呈现到elements值属性中。
另外,请记住,内联样式不是一个很好的实践。
wz1wpwve2#
使用
hidden
属性而不是type="hidden"
gkn4icbw3#
我也遇到过同样的情况。一切似乎都很好,但我仍然得到了这个冗长。
在我的情况下,帮助我重新定位这个userName输入从表单的末尾到开始。
这是我修改之前的代码:
这是当前代码:
p1tboqfb4#
你必须把输入标签放在另一个标签中,例如:
我在VueJs中也遇到过同样的情况,当我使用渲染条件v-if v-else,我尝试将input标签放入new标签中,这对我来说很有效
6yjfywim5#
虽然我知道这个问题已经很老了,但我想它可能对某些人有用。我在React应用程序更新用户密码时也遇到了同样的问题,这对我来说就在没有标签的密码字段上方。请原谅我以React的方式写作。
基本用法:-
fslejnso6#
在阅读Jonas评论后,我重建了项目,警告消失了
icnyk63a7#
我在控制台中显示了相同的警告,这是我如何修复它的:
rsaldnfx8#
我使用了最新版本的Chrome(2023年9月),我需要几个单独答案的元素来获得警告:
type="text"
;在我的例子中,我添加了hidden
属性,它工作了(没有尝试隐藏样式)autocomplete="username"
上面任何一个失踪,我得到了警告。