Google Chrome警告:密码表单应具有(可隐藏)用户名字段，以方便访问 [英] Google Chrome warning: Password forms should have (optionally hidden) username fields for accessibility

问题描述

在访问单页应用程序的重置密码"路径并查看Chrome浏览器控制台时，收到以下警告:

When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the following warning:

[DOM]密码表单应具有(可隐藏)用户名字段，以实现可访问性:(更多信息:goo.gl/9p2vKq)

[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)

<form class="searchAccount_form animated fadeIn form-tabular ng-pristine ng-valid ng-scope ng-hide" ng-show="isSet(6)" aria-hidden="true">
    	<h5>Choose a new password</h5>
    	<hr class="mt-0">
    	<p>A strong password is a combination of letters and punctuation marks. It must be at least 6 characters long.</p>
    	<div class="form-group row">
    		<label class="col-form-label col-4">New Password</label>
    		<div class="col-7">
    			<input autocomplete="new-password" class="form-control ng-pristine ng-untouched ng-valid ng-empty" type="password" ng-model="$parent.new_pass" name="password" ng-attr-type="{{ showPassword ? 'text':'password'}}" aria-invalid="false">
       	</div>
    	</div>
    	<div class="form-group">
    		  <input type="hidden" name="username" value="craig.francis" autocomplete="off" readonly="readonly">
    			<input type="hidden" name="csrf" value="tr6Gj6w6LczH98" autocomplete="off">
    			<button type="button" class="btn btn-primary" name="button" ng-click="reset_password()">Continue</button>
    			<button type="button" class="btn btn-link" name="button" ng-click="setTab(2)">Skip</button>
    	</div>
    </form>

推荐答案

如果您的问题是关于摆脱此警告的，则可以按照警告消息中的说明添加一个隐藏的文本框.

If your question is about getting rid of this warning, you may add a hidden text-box as mentioned in the warning message.

<input type="text" autocomplete="username" ng-hide="true">

这篇关于Google Chrome警告:密码表单应具有(可隐藏)用户名字段，以方便访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！