自动对焦不适用于角度 10 的 chrome

【问题标题】：Autofocus not working on chrome in angular 10自动对焦不适用于角度 10 的 chrome
【发布时间】：2022-01-19 15:52:18
【问题描述】：

在显示错误的登录 ID 和密码消息并在 VOICE OVER/talk back 上宣布后，我正在尝试自动关注登录 ID。

它应该将焦点转移到登录 ID 文本字段。确保我的应用程序ADA 和 508 合规性。

<input id="loginID" tabindex="0" autofocus matInput type="text" #userId placeholder="{{'LoginPage.UserID' | translate}}" ngModel
 formControlName="userId" required aria-required="true" aria-label="userId is mandatory field" aria-describedby="userIdValidationMsg">

自动对焦不适用于 chrome。有什么建议可以结束我在谷歌上自动对焦 angular 10 的搜索。

开放征求关于在其他一些地方实施相同解决方案的建议接近。

【问题讨论】：

在错误登录前自动对焦是否有效？
它可以在其他浏览器中使用吗？

标签： html angular voiceover talkback section508

【解决方案1】：

autofocus 通常用于页面加载。在您的情况下，听起来页面已经加载，然后用户输入了错误的登录名，然后您动态添加了autofocus？如果是这样，那不是autofocus 的预期用途。相反，您可以在 <input> 上使用 javascript focus()。

document.getElementById('loginID').focus();

附注，<input> 上不需要 tabindex="0"，因为它本身就可以通过键盘聚焦。

另外，如果您同时有aria-label 和<label> 元素，请小心。 aria-label 将“获胜”，<label> 将被忽略。您的代码示例没有显示<label>，但确实使用了aria-label，所以我想提一下以防万一。

【讨论】：