如何阻止浏览器跳转到焦点领域？

Question

我有一个容器内溢出的形式：隐藏，我改变它的className，其中每个类使其顶部边缘显示焦点（）适当的焦点领域。

所以jQuery只应用className。除webkit之外不涉及任何动画。

问题是，在动画发生之前，容器中的表单MOVES会显示隐藏的字段。检查器中没有值发生变化：top，top-margin，top-padding保持不变。我试过preventDefaults();关注焦点领域，没有成功。

这是一个小提琴来展示案例。

http://jsfiddle.net/dNk9v/

更新： 我要明确的是，当“跳格”到下一个字段，它去那里，但CSS动画时在它的上面，而形式，也跳不动画或只是随着已经发生的滚动/显示动画，所以期望的字段在容器外部结束。

单击图例标签选项卡按预期工作。我会尝试防止keydown事件的默认值，而不是焦点事件的默认值，并且我会保持更新。

Answer 1

每这篇文章，它似乎是一个相当复杂的问题：https://forum.jquery.com/topic/chrome-bug-or-how-do-i-prevent-a-form-field-to-scroll-the-container-when-focused

我已经通过手工管理的投入的tabindex属性管理类似的问题。这样可以消除不需要的伪滚动，但也会删除在视口之外对输入进行制表符的功能。如果你愿意住在一起，那么你可以很容易地添加一些代码到你的点击处理程序添加或删除tabindexes：

$(inputEl).attr('tabindex', -1); // removes tabbing 
$(inputEl).attr('tabindex', 1); // restores tabbing 

从视外面输入取出的标签索引，并将其还原为可见的投入。