javascript - 是否可以防止隐藏的元素跳入焦点 View

标签 javascript html css focus carousel

我的任务是创建一个可访问/响应式轮播,并且在 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/

相关文章:

javascript - For 循环问题 JavaScript

javascript - 将大查询拆分为谷歌地图

javascript - 为 IE6 调试 javascript

javascript - Cordova - http 请求不处理本地 php

html - 调整 .container 宽度时对导航栏产生不良影响

Javascript 单选按钮组验证

javascript - 如何制作只能单击一次的元素?

html - 剪辑路径上的文本

html - CSS 标题布局

html - 我应该多久在 CSS 中使用子/兄弟选择器?