0

我在一个带有溢出:隐藏的容器内有一个表单,我正在更改它的类名,其中每个类都使其上边距以使用焦点()显示正确的焦点字段。

所以 jQuery 只应用类名。不涉及 webkit 以外的动画。

问题是在动画发生之前,窗体在容器内移动以显示隐藏字段。检查器中的值没有变化:顶部、顶部边距、顶部填充保持不变。

我试过了preventDefaults();了重点领域,没有成功。

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

http://jsfiddle.net/dNk9v/

更新:我想明确一点,当“tabbing”到下一个字段时,它确实会去那里,但是 css 动画发生在它上面,并且表单要么不跳转动画,要么只是动画与已经发生的滚动/揭示所以预期的字段最终在容器之外。

单击图例标签选项卡按预期工作。我将尝试阻止 keydown 事件的默认值,而不是焦点事件,我会及时通知您。

4

1 回答 1

1

根据这篇文章,这似乎是一个相当复杂的问题:https ://forum.jquery.com/topic/chrome-bug-or-how-do-i-prevent-a-form-field-to-scroll-the-聚焦时容器

我通过手动管理输入的 tabindex 属性来管理类似的问题。这消除了不需要的伪滚动,但也消除了在视口之外选择输入的能力。如果您愿意接受它,那么您可以轻松地将一些代码添加到您的点击处理程序中以添加或删除标签索引:

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

从视口外的输入中删除选项卡索引,并为可见输入恢复它们。

于 2015-04-07T18:09:32.980 回答