jquery tabindex/focus & 热键

发布于 2024-07-26 09:23:49 字数 1281 浏览 4 评论 0原文

在几个浏览器中 tabindex 似乎存在一些问题,所以我想使用 javascript/jquery 解决这些问题。 具体来说,FF3.5 (Mac) 不接受 tabindex 或根本不关注链接。 我的网站上运行着 jquery 1.3.2 和 js-hotkeys 0.7.9。

我在一页上有 4 个表格,我可以使用链接在它们之间切换。 现在,当页面加载时,我使用其中的 id 获得焦点的链接之一。 然后我希望能够在每个链接之间切换以显示每个表单。

精简代码如下所示:

HTML

<nav id="postNav">
    <ul>    
        <li class="Nav1"><a href="#">1</a></li>
        <li class="Nav2"><a href="#">2</a></li>
        <li class="Nav3"><a href="#">3</a></li>
        <li class="Nav4"><a href="#">4</a></li>
    </ul>
</nav>

<form class="postForm" id="post1">
</form>

<form class="postForm" id="post2">
</form>

<form class="postForm" id="post3">
</form>

<form class="postForm" id="post4">
</form>

Jquery

$(document).ready(function(){               

    $("#postNav ul li a").click(function(event){
        var postOptionSelected = $(this).parent("li").attr("class").substr(3);
        $("form#post"+postOptionSelected).show();
            $("form.postForm:not(#post"+postOptionSelected+")").hide();
            event.preventDefault();
    });
});

There seem to be some problems with tabindex in several browsers so I want to work around these issues using javascript/jquery. Specifically FF3.5 (Mac) doesn't accept tabindex or focus on links at all. I have jquery 1.3.2 and js-hotkeys 0.7.9 running on my website.

I have 4 forms on 1 page which I can switch between using a link. Now when the page loads I what 1 of the links to have the focus using it's id. Then I want to be able to tab between each link to display each form.

Stripped down code looks like this:

HTML

<nav id="postNav">
    <ul>    
        <li class="Nav1"><a href="#">1</a></li>
        <li class="Nav2"><a href="#">2</a></li>
        <li class="Nav3"><a href="#">3</a></li>
        <li class="Nav4"><a href="#">4</a></li>
    </ul>
</nav>

<form class="postForm" id="post1">
</form>

<form class="postForm" id="post2">
</form>

<form class="postForm" id="post3">
</form>

<form class="postForm" id="post4">
</form>

Jquery

$(document).ready(function(){               

    $("#postNav ul li a").click(function(event){
        var postOptionSelected = $(this).parent("li").attr("class").substr(3);
        $("form#post"+postOptionSelected).show();
            $("form.postForm:not(#post"+postOptionSelected+")").hide();
            event.preventDefault();
    });
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

源来凯始玺欢你 2024-08-02 09:23:49

这不是 Firefox 的问题。 这是 Mac OS 的系统设置。 在系统偏好设置中,键盘和 鼠标和键盘快捷键,有一个完整的键盘访问设置,允许用户配置是否希望 Tab 启用将键盘焦点更改为仅文本框和列表或所有控件。 默认情况下,它仅设置为文本框和列表。

Mac OS 上的 Safari 在 Safari、首选项、高级、按 Tab 突出显示网页上的每个项目中有一个设置,以覆盖此行为。

This isn't a Firefox issue. It's a system setting for Mac OS. In System Preferences, Keyboard & Mouse, and Keyboard Shortcuts, there's a Full keyboard access setting that allows users to configure whether they want Tab to enable changing keyboard focus to text boxes and lists only or to all controls. It is set to text boxes and lists only by default.

Safari on Mac OS has a setting in Safari, Preferences, Advanced, Press Tab to highlight each item on a webpage to override this behavior.

深爱成瘾 2024-08-02 09:23:49

我认为您忘记了“帖子”之后的“表格”:

    $("form#postForm"+postOptionSelected).show();
    $("form.postForm:not(#postForm"+postOptionSelected+")").hide();

I think you forgot the "Form" after "post":

    $("form#postForm"+postOptionSelected).show();
    $("form.postForm:not(#postForm"+postOptionSelected+")").hide();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文