在焦点上输入或按下Tab键，移至屏幕中心 [英] input on focus or tab key pressed, move to center of screen

问题描述

我在页面折叠中有许多表单字段.当按下"Tab"键逐步浏览每个输入/选择字段时，它将位于页面折叠底部的下一个字段.

I have a number of form fields spanning over the page fold. When pressing the "tab" key to step through each input/select field it sits the next field on the bottom of the page fold.

我的一些字段在该字段下方显示工具提示，验证响应和自动建议框.转到该字段时，您不会在页面折叠下方看到这些元素.

A few of my fields have tool tips, validation responses and auto suggest boxes that appear below the field. When tabbing to the field, you can't see these elements below the page fold.

是否有一个javascript或jQuery脚本可以将屏幕垂直居中显示在聚焦的输入/文本区域/选择/按钮字段周围，而不是与底部对齐?

Is there a javascript or jQuery script that can vertically centre the screen around a focussed input/textarea/select/button field instead of aligning to the bottom?

推荐答案

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

You can just bind to the focus event and then calculate the offset of the field and center it on the screen.

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

这篇关于在焦点上输入或按下Tab键，移至屏幕中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！