0

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

这在 IE 8/9 中运行良好，但在 Firefox(15) 中，我看到在锚标记所在的位置呈现了一个小的焦点方块。我想抑制这一点，我尝试设置display:none，但当然这会停止滚动工作。我试图创建一个小提琴，但 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;
}
4

1 回答 1

1

按照要求...

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

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

jquery文档有这个有趣的评论。

"The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types."

于 2012-09-04T12:53:48.240 回答