隐藏 div 出现时让整个表单保持焦点答案

【问题标题】：Have whole form retain focus when hidden div appears隐藏 div 出现时让整个表单保持焦点
【发布时间】：2018-06-14 08:24:17
【问题描述】：

当隐藏的 div 显示在选择选项事件上时，我正在尝试获取一个表单来获取焦点或滚动到焦点。我是 jQuery 新手，但在这个脚本上尝试过 $('#id').focus(); 和 scrollIntoView() 之类的东西 --

$(function() {
    $('#continue').change(function(){
        if ($(this).val()) {
            $('#hidden').slideDown(2000)
            $('#hidden').show()  
            $('#continue').focus();         
        } else {
            $('#hidden').hide();
        }
    });
});

-- 但我不确定这些是否是我正在寻找的功能。

如果你看一下http://jsfiddle.net/snqL2pf9/10/，你会发现如果你在那里选择你最喜欢的水果，我会向下滑动一个隐藏的 div。但是，隐藏的 div 只是向下滚动到查看窗口之外。当隐藏的 div 显示时，我希望整个表单在查看窗口中具有完全的焦点。因此，本质上，当表单的其余部分向下滑动时，查看窗口会随之向下滚动以将所有内容都显示在视图中，而不是隐藏在当前视点下方消失的东西。这可能吗？

【问题讨论】：

标签： jquery

【解决方案1】：

您可以在 slideDown 中设置一个回调函数，然后在完成后滚动页面，如下所示：

$('#hidden').slideDown(2000, "linear", function(){
            var scrollDistance = $("#continue")[0].offsetTop;
            window.scrollTo(0,scrollDistance);
        });

http://jsfiddle.net/snqL2pf9/17/

编辑：如果你想让 window.scroll 也有动画，你可以使用它来代替 window.scrollTo

window.scroll({
  top: scrollDistance, 
  left: 0, 
  behavior: 'smooth' 
});

【讨论】：

谢谢。这很有帮助，并且符合我的想法。不过它确实有点快。我正在寻找的更多是让表单的其余部分滑入下面的视图，而不是让表单的顶部在.show 之后捕捉到顶部。它类似于常见问题解答下拉菜单，当您单击问题时，答案会向下滑动，同时保持焦点。
检查我的编辑。或者，如果您希望它在动画时滚动，您可以尝试以下操作：jsfiddle.net/snqL2pf9/30
Joachim，这些编辑都非常出色。谢谢。两者都非常适合我的目的。感谢您的时间和兴趣。