我的任务是创建一个可访问/响应式轮播,并且在 Chrome 中遇到了一个关于隐藏元素焦点的问题。
根据这个 jsfiddle ( http://jsfiddle.net/ft1oosep/ );如果您按 Tab 直到隐藏元素获得焦点,您会看到链接被提升到 View 中,而没有对该元素的 css 属性进行任何更新。
对于旋转木马,这会导致问题,因为我需要随时跟踪旋转木马的位置。我试图模糊焦点,但即使那样似乎也太迟了。这个问题是否有简单的解决方案,或者我是否要开发一些复杂的焦点/选项卡管理?
提前致谢
(拜托,不要暗示轮播是个坏主意……这是我的任务)
示例代码:
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial';
font-size: 13px;
}
div {
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ffffff;
}
a {
width: 200px;
height: 200px;
text-align: center;
background: #A6C6DD;
display: block;
color: #ffffff;
text-decoration: none;
}
a:last-child {
background: #746F9E;
}
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
<a href="#">Visible Link</a>
<a href="#">Hidden Link</a>
</div>
最佳答案
在我的例子中,我添加了一个动态的 tabindex
属性,这样当可选项卡元素隐藏时,它是 tabindex="-1"
(防止所有制表符),当可见时,它变为 tabindex="0"
(在正常的浏览器制表符顺序中可制表)。
代码可能特定于实例,但一般来说,在渲染时将有问题的元素的 tabindex
属性设置为 tabindex="-1"
,然后如果使有问题的元素可见,则在该元素可见时在该元素上设置 tabindex="0"
(再次隐藏后返回 tabindex="-1"`。)
辅助功能说明:tabindex
值很少使用除 -1(禁用制表符)或 0(正常制表符流)以外的任何值。
关于javascript - 是否可以防止隐藏的元素跳入焦点 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26240682/