javascript - 输入焦点或按下 tab 键，移动到屏幕中心

Question

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

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

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

Answer 1

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

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