Question

我在rails中运行下面的jquery代码：

$(document).ready(function(){
    $(".add-new-team-button").on("click", function(){
        $(".new-team-form").fadeToggle("fast", function(){
            $(".new-team-form").focus();
        });
    });
});

点击我网页上div内的按钮，它应显示或隐藏包含表单的div（ .new-team-form ）。但是，当div显示/显示时，我希望浏览器将焦点放在div上，因为你必须向下滚动才能看到它。淡入淡出切换工作完全正常。我不能让它专注于表格div。我关于使焦点（）动作工作的理论产生了上面的代码，我很感激帮助修复它，因为它显然是错误的。

Answer 1

如果您想使用焦点，您的div必须具有tabindex属性，如：

<div class="new-team-form" tabindex="-1">Add data</div>

或者您可以使用scrollTop方法，例如：

$(window).scrollTop($('.new-team-form').offset().top);

演示：http://jsfiddle.net/wygs46r5/

Answer 2

.focus()无法滚动，.scrollTop(position)会滚动。 JSFiddle with solution。编辑：如果在输入字段上调用，焦点将滚动。 scrollTop是一个更通用的解决方案。

Answer 3

找到第一个表单元素并专注于此。使用.find(':input:visible').first().focus()。

$(document).ready(function(){
    $(".add-new-team-button").on("click", function(){
        $(".new-team-form").fadeToggle("fast", function(){
            $(this).find(':input:visible').first().focus();
        });
    });
});

如果在jquery中使用.fadetoggle（）可见的元素上如何.focus（）？

3 个答案: