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

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);
    }
});