javascript - 无法在 Firefox 中设置默认焦点

Question

我们有以下 HTML:

<div>
    <span>
        <span id="Container1" tabindex="1" >Container1</span>
    </span>
</div>
<span id="Container2" tabindex="2" >Container2</span>

我们需要将焦点设置到 Container2 <span>加载页面时的元素。

我尝试了以下 jquery:

$(document).ready( function(){

    $("#Container2").focus();
});

它在 Chrome(版本 35.0.1916.153)和 IE9 中运行良好。但在 Firefox (v. 30.0) 中它不起作用。根据this question我也试过了

$(document).ready( function(){

    setTimeout(function () {
                    $("#Container2").focus();
               }, 0);
});

和

$(document).ready( function(){

    setTimeout(function () {
                   $("#Container2").trigger('focus');
               }, 0);
});

但是是一样的result .

在我们按下 TAB 键之前，也无法通过鼠标点击来选择元素。

我看了this问题，似乎焦点设置正确但未呈现轮廓。

有什么方法可以在 Firefox 中设置默认焦点吗？

Answer 1

这值得一读:http://www.w3.org/html/wg/drafts/html/master/editing.html#attr-tabindex

The user agent should follow platform conventions to determine if the element's tabindex focus flag is set and, if so, whether the element and any focusable areas that have the element as their DOM anchor can be reached using sequential focus navigation, and if so, what their relative position in the sequential focus navigation order is to be. Modulo platform conventions, it is suggested that for the following elements, the tabindex focus flag be set:

• a elements that have an href attribute
• link elements that have an href attribute
• button elements
• input elements whose type attribute are not in the Hidden state
• select elements
• textarea elements
• menuitem elements

但是:您的用例似乎是忽略焦点平台约定的正当理由。

One valid reason to ignore the platform conventions and always allow an element to be focused (by setting its tabindex focus flag) would be if the user's only mechanism for activating an element is through a keyboard action that triggers the focused element.

您目前唯一的问题似乎是，当您选择一个元素时，Firefox 没有显示轮廓。请看一下这个演示: http://jsfiddle.net/DBEjV/1/

这里是一些 CSS 示例，用于设置具有 :focus 的元素的样式.尝试设置此项并查看您的问题是否仍然存在。

自定义焦点样式:

:focus
{
    box-shadow: blue 0px 0px 1px 1px;
    outline: none;
}

你仍然应该考虑去掉 tabindex并替换你的 <span>有效 <a>链接(针对所需的树节点)。然后，您应该让浏览器处理正确的选项卡顺序，并且不会忽略上面的规则 postet。