输入焦点或按下 Tab 键，移动到屏幕中心答案

【问题标题】：input on focus or tab key pressed, move to center of screen输入焦点或按下 Tab 键，移动到屏幕中心
【发布时间】：2009-12-03 03:04:09
【问题描述】：

我有许多跨越页面折叠的表单域。当按“tab”键逐步浏览每个输入/选择字段时，它位于页面折叠底部的下一个字段。

我的一些字段在字段下方显示了工具提示、验证响应和自动建议框。切换到字段时，您无法在页面折叠下方看到这些元素。

是否有 javascript 或 jQuery 脚本可以将屏幕垂直居中围绕焦点输入/文本区域/选择/按钮字段而不是与底部对齐？

【问题讨论】：

其他人我不知道，但是每次我改变焦点时屏幕位置的变化都会让我抓狂。我更喜欢仅在所需元素之一不完全在视口内时滚动偏移量的解决方案。
我的回答对你有用吗？如果/为什么不满足您的问题，请提供评论
@Pekka 我同意这是一个特殊的操作，并且会谨慎使用，因为它会很烦人。只是想一个合适的解决方案 - 可能只在“选项卡”而不是焦点时使字段居中，或者滑动动画滚动。否则还有什么其他方法可以使焦点输入从页面折叠中填充？

标签： javascript jquery input

【解决方案1】：

您可以只绑定到焦点事件，然后计算字段的偏移量并将其在屏幕上居中。

$(':input').focus(function(){
    var center = $(window).height()/2;
    var top = $(this).offset().top ;
    if (top > center){
        $(window).scrollTop(top-center);
    }
});

【讨论】：

我认为这是对我的问题最简单的解决方案，但正如评论的那样，该操作不是标准的，在大多数情况下可能是一个烦人的操作 - 这个问题需要稍微重新定义才能有实际用途这个解决方案。
做一些检查，它得到了正确的值，但窗口或文档 scrollTop() 不想玩球......我已经把它改成了 div id (#div).scrollTop几乎做到了，但不像我期望的 body 或 window 那样一致。
Firefox 和/或 Chrome 有时会出现问题。你可以试试$('html, body').animate({scrollTop: top - center}, 300); 这对我有用
$(window).height() 对我不起作用，因为它正在计算整个网站内容而不是窗口的长度。我改用$(window).outerHeight()。使用 jQuery 版本 3.2.1

【解决方案2】：

同上，平滑滚动效果

 $(':input').focus(function () {
         var center = $(window).height() / 2;
         var top = $(this).offset().top;
         if (top > center) {
             $('html, body').animate({ scrollTop: top - center }, 'fast');            
         }
     });

【讨论】：

【解决方案3】：

最简单的方法是包含jQuery ScrollTo plugin 和jQuery Viewport 插件。

然后将每个输入 + 相关的其他元素（验证响应，....）包装在一个 div 中。

焦点检查 div 是否完全可见，如果没有则使用scrollTo。完成。

当然，这有点臃肿，但如果您可以忍受另外 2 个依赖项和额外的 ~4kb，这应该可以在不自己进行计算的情况下工作。

【讨论】：