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

Posted

技术标签:

【中文标题】自动对焦不适用于角度 10 的 chrome【英文标题】:Autofocus not working on chrome in angular 10 【发布时间】: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 的搜索。

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

【问题讨论】:

在错误登录前自动对焦是否有效? 它可以在其他浏览器中使用吗? 【参考方案1】:

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

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

附注,&lt;input&gt; 上不需要 tabindex="0",因为它本身就可以通过键盘聚焦。

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

【讨论】:

以上是关于自动对焦不适用于角度 10 的 chrome的主要内容,如果未能解决你的问题,请参考以下文章

检测自动填充和停止对焦

Chrome 自动填充功能不适用于特定页面

YouTube iframe 播放器的自动播放不适用于 chrome 和 firefox

移动 Safari 忽略了我的自动对焦 jQuery 事件?

Google chrome 自动填充功能不适用于所有机器

禁用用户名和密码的chrome自动填充不适用于较新版本