Firefox 无法设置默认焦点答案

【问题标题】：Cannot set default focus in firefoxFirefox 无法设置默认焦点
【发布时间】：2014-07-24 17:08:26
【问题描述】：

我们有以下 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 中设置默认焦点？

【问题讨论】：

"焦点事件在一个元素获得焦点时被发送。该事件隐式适用于有限的一组元素，例如表单元素（、
实际上，当您不使用超时时，它似乎有效：jsfiddle.net/BVS29/87 但您必须在 jsfiddle 之外观看：fiddle.jshell.net/BVS29/87/show 这是因为 tabindex
尼科，谢谢你的回复。你说的对。当我们使用“全屏结果”link 时，它正在工作。但是在我们按下 TAB 按钮之前，我们仍然有一个用鼠标单击选择元素的问题。我们也不能像here那样设置焦点。你有想法吗？
解释一下你的用例会很有用。就像您在 jQuery 文档中阅读的那样，不推荐使用能够关注非输入/href 元素的行为。你为什么要这样做？我想最好将跨度更改为输入元素并删除它们的外观。
我们有项目的树形结构，我们需要使用键盘的箭头按钮来实现导航。一些由标记表示的项目，其他由表示。似乎问题不在跨度标签中，而是在 Firefox 焦点大纲中。

标签： javascript jquery html css firefox

【解决方案1】：

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

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

具有 href 属性的元素

具有 href 属性的链接元素

按钮元素

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

选择元素

文本区域元素

menuitem 元素

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

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

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

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

自定义焦点样式：

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

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

【讨论】：

谢谢尼科。使用自定义焦点样式似乎是解决我的问题的最佳方法。

【解决方案2】：

如果您希望元素获得对文档加载的关注，只需指定 HTML-5 属性“autofocus”。

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

【讨论】：

HTML5 中的span 元素不允许使用autofocus 属性。浏览器会在那里忽略它。

【解决方案3】：

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

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

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

【讨论】：