Question

我们要求页面可以包含具有多个部分的表单。可以添加或删除部分。用户选择添加部分后，表单将被提交，并返回新页面并添加新部分。浏览器应滚动到新部分的顶部。这很好，我有一个通用的jquery“滚动到锚”解决方案工作。但是，除了简单地设置window.location()之外，我还需要确保对于键盘用户，点击标签会将它们带到锚点后的下一个字段。我正在使用此question的解决方案来执行此操作。

这在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;
}

Answer 1

按照要求......

模糊功能负责输入丢失的焦点。

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

jquery documentation有这个有趣的评论。

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

Firefox - 不在输入控件上时隐藏焦点突出显示

1 个答案: