Question

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

我的一些字段中包含显示在字段下方的工具提示，验证响应和自动建议框。当标签到字段时，您无法在页面下方看到这些元素。

是否有javascript或jQuery脚本可以围绕焦点输入/ textarea / select / button字段垂直居中，而不是对齐底部？

Answer 1

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

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

Answer 2

最简单的方法是添加jQuery ScrollTo plugin和jQuery Viewport插件。

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

在焦点上检查div是否完全可见，如果不使用scrollTo。完成。

当然这有点膨胀，但如果你可以忍受2个以上的依赖关系和额外的~4kb，这应该可以自行完成计算。

Answer 3

与上面相同，具有平滑滚动效果

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

按下焦点或标签键输入，移动到屏幕中心

3 个答案: