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（版本30.0）中它不起作用。根据{{3}}，我也尝试了

$(document).ready( function(){

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

和

$(document).ready( function(){

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

但它是相同的this question。

在我们按TAB按钮之前，也无法通过鼠标单击选择元素。

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

是否可以在Firefox中设置默认焦点？

Answer 1

如果您希望元素专注于文档加载，只需指定HTML-5属性“autofocus”。

<span id="Container2" tabindex="2" autofocus>Container2</span>

Answer 2

问题开始时的代码在独立测试时有效。 jsfiddle中的某些东西阻止它工作。如果代码在您的上下文中不起作用，那么还有其他一些代码介入。

您也可以使用简单的纯JavaScript：

<script>
window.onload = function() {
  document.getElementById('Container2').focus();
}
</script>

Answer 3

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

用户代理应遵循平台约定来确定是否设置了元素的tabindex焦点标志，如果是，则使用顺序焦点导航是否可以到达元素和任何具有元素作为其DOM锚点的可聚焦区域，以及那么，它们在顺序焦点导航顺序中的相对位置是什么。 Modulo平台约定，建议用于以下内容   元素，tabindex焦点标志设置：


具有href属性的元素

具有href属性的链接元素

按钮元素

type属性未处于隐藏状态的输入元素

选择元素

textarea elements

menuitem elements

<强>可是：看来你的用例是忽略平台约定的有效理由。

忽略平台约定并始终允许的一个正当理由要聚焦的元素（通过设置其tabindex焦点标志）将是如果用户激活元素的唯一机制是通过a 触发聚焦元素的键盘动作。

当你选中一个元素时，你唯一的问题似乎是Firefox没有显示大纲。请看一下这个演示： http://jsfiddle.net/DBEjV/1/

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

自定义对焦样式：

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

您仍然应该考虑删除tabindex并将<span>替换为有效的<a>链接（定位到所需的树节点）。然后，您应该让浏览器处理正确的Tab键排序，并且不会忽略上面的规则。

无法在firefox中设置默认焦点

3 个答案: