Firefox-当不在输入控件上时隐藏焦点高亮显示

Firefox - hiding focus highlight when not on an input control

本文关键字：隐藏 焦点 高亮 显示 控件 输入 Firefox-      更新时间：2023-09-26

我们有一个要求，即一个页面可以由一个包含多个部分的表单组成。可以添加或删除节。用户选择添加部分后，将提交表单，并返回添加了新部分的新页面。浏览器应该滚动到新部分的顶部。这很好，我有一个通用的jquery"滚动到锚"解决方案。然而，除了简单地设置window.location()之外，我还需要确保对于键盘用户来说，点击tab键会将他们带到锚点之后的下一个字段。我正在使用这个问题的解决方案来做这件事。

这在IE 8/9中运行良好，但在firefox（15）中，我看到锚标记所在的地方有一个小的焦点正方形。我想抑制这种情况，我尝试设置display:none，但这当然会停止滚动。我试图创建一个fiddle，但jsFiddle没有证明这个问题，因为fddle网站本身干扰了焦点设置，但在本地运行的同一浏览器中的相同代码确实会干扰焦点设置。

下面是我的代码的简化版本，演示了这个问题。

<html>
  <head>
     <title>test scroll</title>
  </head>
  <body>
        <form>
            <div>Blah</div>
            <div>
            <label for="a">Section 1: <input id="a" type="text" /></label>
        </div>
        <a id="scrollToAnchorSection2"></a>
        <div>
            <label for="b">Section 2: <input id="b" type="text" /></label>
        </div>
    </form>
</body>
</html>

和我的jquery

$(document).ready(function() {
     /* Find any "scroll to anchors" that have been set */
    var anchors = $('[id*=scrollToAnchor]:first');
    if (anchors.length == 1) {
        window.location = "#" + anchors.attr("id");
        // Set tab position
        anchors.attr("tabindex", -1).focus();
    }
});

和css

div {
    margin-left:5em;
}

根据要求。。。

模糊功能处理输入的失去焦点的情况。

$('input').blur(function (){...})?这不是你需要的吗？

jquery文档中有这样一条有趣的注释。

"模糊事件在失去焦点时被发送到元素。最初，此事件仅适用于表单元素，如。在最近的浏览器中，事件的域已扩展到包括所有元素类型。"

相关文章：