Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >当路径在角上改变时,可访问性-Focus丢失

当路径在角上改变时,可访问性-Focus丢失
EN

Stack Overflow用户
提问于 2020-01-24 01:24:13
回答 3查看 1.9K关注 0票数 3

在组件之间导航的焦点正在丢失,我已经强制将焦点设置为菜单按钮,但是一旦路由器导航被更改,焦点也会丢失。是否有修复方法来重置路由更改的焦点?

这些属性也不工作(自动焦点,设置焦点,cdkfocusinitial).

EN

回答 3

Stack Overflow用户

发布于 2020-01-28 02:24:20

最后得到了解决方案,最初模糊了元素,并将焦点设置为相同的元素...working精细!

代码语言:javascript
运行
AI代码解释
复制
let blurElement: HTMLElement = document.getElementsByClassName('menubutton')[0] as HTMLElement;
blurElement.blur();

setTimeout(function(){
  let focusElement: HTMLElement = document.getElementsByClassName('menubutton')[0] as HTMLElement;
  focusElement.focus();
},0);
票数 1
EN

Stack Overflow用户

发布于 2020-01-24 01:43:22

票数 0
EN

Stack Overflow用户

发布于 2020-01-24 04:49:32

这不是完全解决的问题,但是有一些更好、更坏的方法来处理它。我认为在呈现新路由的内容之后,您将不得不调用focus(),尽管已经有各种尝试使这种情况自动发生,而这一点(正如其他人所指出的那样)并不能真正正常工作。

真正的问题是应该把重点放在上。这可以是简单的,也可以是有挑战性的,取决于您在页面顶部的内容。

请务必阅读这(长)条关于在单页应用程序中更改路由时如何处理焦点的内容。这是迄今为止关于这一主题的最好的实证研究,并提出了一些可行的建议。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59893531

复制
相关文章
IL3000:当发布为单个文件时,避免访问程序集文件路径
发布为单文件(例如将项目中的 PublishSingleFile 属性设置为 true)时,调用嵌入在单文件捆绑包内的程序集的 Assembly.Location 属性将始终返回空字符串。
呆呆
2022/02/26
5300
IL3001:当发布为单个文件时,避免访问程序集文件路径
发布为单文件(例如,通过将项目中的 PublishSingleFile 属性设置为 true)时,为单文件捆绑包内嵌入的程序集调用 Assembly.GetFile(s) 方法将始终引发异常,因为这些方法与单文件不兼容。
呆呆
2022/02/26
5080
模拟按钮的可访问性
为了创建更加漂亮的按钮,我们在项目实践中经常使用A、SPAN等元素模拟按钮,而不是使用更合语义的input[button]或者button元素。使用这种方法我们可以快速的创建各浏览器表现一致的按钮,免受各种bug困扰,但同时也带来了可访问性问题。
Jace
2018/08/01
9240
当jQuery 1.7遇上focus方法
jQuery中有一个focus()方法能设置对象的焦点,在1.7以下的版本中,不管对象是不是disabed状态,这个方法都不会报错(只是当disabled时,设置焦点的代码无效),但在1.7版本中,如果对象是disabled状态,这时调用focus()方法时,会直接报异常:
菩提树下的杨过
2019/09/12
7780
WAI-ARIA 可访问性尝试
WAI-ARIA 的全称是 Web Accessibility Initiative – the Accessible Rich Internet Applications Suite。简而言之:我们使用这个标准定义的一些方式,来实现无障碍化,目的是为了让那些残障人士也可以顺利的访问我们的站点。
上山打老虎了
2022/06/15
4470
WAI-ARIA 可访问性尝试
如何提高网站的可访问性?
关于可访问性的错误观念 可访问性影响所有用户,而不仅仅是那些有特定障碍的用户。接受这一点意味着实现可访问性就是建立压力案例。压力案例指的是影响任何一个人的任何医疗或任何情境状况,无论是什么场景时间点。一些常见的压力案例原因是:
lyb-geek
2018/12/11
1.6K0
关于 Web 可访问性的神话
网络可访问性是每个 Web 开发项目中的必去之处,但对于许多 Web 开发人员来说,它似乎仍是个谜。就像这是传奇的东西, 而不是工作所需的基本技能。
OwenZhang
2021/12/08
6890
关于 Web 可访问性的神话
可访问性测试(无障碍测试)
网络是向所有人开放的,作为一个测试者(也是人),我们有责任检查它是否对所有用户开放。反过来,这将为业务的成功做出很大贡献,因为我们努力让每个用户都能访问应用程序。
FunTester
2023/08/04
8360
可访问性测试(无障碍测试)
当NASA因公制数学错误而丢失航天器时
1999年9月,经过近10个月的火星旅行后,火星气候轨道飞行器被烧成碎片。在NASA工程师希望庆祝的那天,事实证明地面实在是完全不同的,这都是因为有人没有使用正确的单位,即公制单位!《科学美国人》太空实验室就这个主题制作了一个简短而有趣的视频。
开物小编
2021/04/27
1.9K0
当NASA因公制数学错误而丢失航天器时
SpringBoot解决文件上传,返回可访问路径
问题描述:SpringBoot项目中需要上传文件到当前服务器的磁盘(即物理地址),返回可访问的路径给前端。前端利用路径显示文件内容。 开发环境:SpringBoot2.0以上、JDK 1.8
全栈程序员站长
2022/08/15
1.7K0
10步大幅提升网站可访问性
10步大幅提升网站可访问性:1. 检查<title>标签;2. 提供文字替代方案;3. 检查表单;4. 使用heading做信息架构;5. 减少焦点劫持;6. 按Ctrl+或command+查看页面缩放;7. 添加landmark角色;8. 设置快捷键;9. 触发界面转换需设置焦点;10. 填写一个简单的链接到<body>之后作为第一个内容元素。
RP道貌不岸然
2017/11/22
1K0
10步大幅提升网站可访问性
访问Github样式丢失
哎提起来就伤心, 本人居住在北京(某某公寓), 使用的changchen带宽, 100/月(吐槽坑人的房栋)无法自己拉网线
零式的天空
2022/03/27
1.7K0
运营数据库系列之可访问性
这篇博客文章是CDP中Cloudera的运营数据库(OpDB)系列文章的一部分。每篇文章都会详细介绍新功能。从该系列的开头开始,请参阅CDP 中的 Operational Database 。
大数据杂货铺
2020/04/21
8840
运营数据库系列之可访问性
10条提高网站可访问性的建议
我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。
frontoldman
2019/09/02
1.1K0
10条提高网站可访问性的建议
提升网站可访问性的CSS实践方法
随着互联网的不断发展,越来越多的人开始依赖于网络,如何让网站更加易于访问、易于阅读是一个至关重要的问题。本文将从多个方面介绍如何使用CSS来提升网站的可访问性。
很酷的站长
2023/10/07
2860
提升网站可访问性的CSS实践方法
.Net6种成员的可访问性
CLR术语 C#术语 描述 Private private 成员只能由定义类型或任何嵌套类型访问 Family protected 成员只能由定义类型,任何嵌套类型或者不管在任何程序集中声明的派生类型访问 Family  and  Assembly 不支持 成员只能由定义类型,任何嵌套类型或者同一程序集中定义的派生类型访问 Assembly internal 成员只能由定义程序集访问 Family or Assembly protected  internal 成员可由定义类型,任何嵌套类型,任何派生类或者
莫问今朝
2018/08/31
6070
当公司倒闭时,你在干什么?
说出来你可能不信,松哥竟然也经历过公司倒闭的事!最近看到我 GitHub 上开源的 vhr 项目 star 数即将过3k,不禁想起做这个项目时候的事,刚过去一年多,依然历历在目。
江南一点雨
2019/05/07
6630
当公司倒闭时,你在干什么?
当人们在讨论 ChatGPT 时,都在讨论什么
第一,ChatGPT 本质上没有脱离计算机的计算范畴,它只能也终将取代繁重重复、只依靠经验和知识的劳动和工作,它可以取代大部分行业的一部分人,包括程序员,但是无法取代所有程序员,也无法取代那些依靠智慧和灵感的工作,笔者在大厂待过一两年,相信所有大厂都一样,主要产品的代码由于历经多人维护、多次迭代、多向重构,其代码量随随便便几千万行甚至上亿计,这样一个庞然大物能够运行起来,除了优雅的架构设计,还有数不清的胶水,复杂度远超当下 ChatGPT 能够生成的 demo 代码,但是它还是能够有它用武之地,有记不清的 function 代码,它是个好帮手,因此更像是一个无限容量的代码字典。
月小水长
2023/03/02
5330
当人们在讨论 ChatGPT 时,都在讨论什么
如何测试你做的项目的可访问性
编者按:本文作者:安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员。
苏南
2020/12/16
2K0
如何测试你做的项目的可访问性
cssjshtml vue.js lazy在失去焦点时改变
在失去焦点或者回车时改变。 <!-- # @Time : 2018/10/30 上午12:39 # @Author : BrownWang # @Email : 277215243@qq.com # @File : vue3.html # @Software: PyCharm --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <bod
葫芦
2019/04/17
3.4K0

相似问题

改变实体可访问性

25

如何改变可访问性特征语言?

10

当jquery显示元素时,焦点访问性就会丢失。

11

jQuery focus()未生成虚线轮廓或选择正确-可访问性

10

测试UNC路径的“可访问性”

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档