Javascript 无法在firefox中设置默认焦点

我们有以下HTML：

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

它在Chrome（版本35.0.1916.153）和IE9中运行良好。但在Firefox（30.0版）中，它不起作用。 据我所知，我也试过

$(document).ready( function(){

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

及

但这是一样的

在我们按下TAB按钮之前，也不可能用鼠标点击来选择元素

我看了一下问题，似乎焦点设置得很好，但提纲并没有呈现出来

---

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

如果希望元素在文档加载时获得焦点，只需指定HTML-5属性“autofocus”

Container2

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

您也可以使用简单的普通JavaScript：

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

window.onload=函数（）{
document.getElementById（'Container2'）.focus（）；
}

这值得一读：

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

• 具有href属性的元素
• 链接具有href属性的元素
• 按钮元件
• 类型属性不处于隐藏状态的输入元素
• 选择元素
• 文本区域元素
• 菜单项元素

但是： 您的用例似乎是忽略平台约定以获得关注的有效理由

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

您当前唯一的问题似乎是，当您标记元素时，Firefox没有显示大纲。请看一下这个演示：

下面是一些CSS示例，用于设置具有

：focus

的元素的样式。 尝试设置此选项，看看您的问题是否仍然存在

自定义焦点样式：

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

---

您还应该考虑取消<代码> Tab指标<代码>，并以有效的<代码> <代码>链接（以期望的树节点为目标）替换您的<代码> <代码>。然后，您应该让浏览器处理正确的选项卡顺序，并且不会忽略上面的规则postet。

“焦点事件在获得焦点时发送到元素。此事件隐式地适用于有限的元素集，例如表单元素（，等）”。实际上，它似乎可以工作，当您不使用timeout时：但是您必须在jsfiddle之外观看它：这是因为

tabindex

Nico，谢谢您的回复。你是对的。当我们使用“全屏结果”时，它起作用了。但在按下TAB按钮之前，我们仍然存在鼠标单击选择元素的问题。我们也不能像那样设置焦点。你知道吗？解释一下你的用法会很有用的。正如您在jQuery docu中所读到的，能够关注非输入/href元素是不推荐的行为。你为什么要这样做？我想最好将跨距更改为输入元素并删除它们的外观。我们有项目的树状结构，需要使用键盘的箭头按钮来实现导航。由其他标记表示的某些项。问题似乎不在span标签中，而是在firefox focus outline中。HTML5中的

span

元素不允许使用

autofocus

属性。浏览器忽略了它。谢谢你，尼科。使用自定义焦点样式似乎是解决我的问题的最佳方法。

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

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

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