将输入焦点从固定标题或固定页脚下移出

Question

有没有办法设置填充或边距,或调用javascript移动输入元素,焦点,从固定的导航栏下移动到视图？

我正在使用bootstrap 3.1并创建了一个bootply来显示我正在努力的东西.

问题是当用户使用"Tab"键逐步浏览输入元素并且输入元素落在固定的顶部导航栏或固定的底部导航栏后面时.

让它隐藏在顶部导航栏下并不像底部导航栏那么糟糕,因为控制流从顶部开始.如果用户选中备份表单,则控制流程存在问题.

这是bootply的URL:http://bootply.com/110608#

谢谢

Answer 1

您可以使用 jQuery animate 在每个输入聚焦时滚动正文。

$('input').focus(function() {
    var ele = $(this);
    $('html, body').animate({
        scrollTop: ele.offset().top - 80 /* 80 is height of navbar + input label */
    }, 800);
});

演示： http: //bootply.com/110643