每个“面板”

Question

所有关于贯彻落实了“科达样” jQuery的滑盖形式，

我实施“科达”像jQuery的滑块（我使用的是尼尔·多尔蒂的优秀执行：http://www.ndoherty.biz/2009/10/coda-slider-2/）。

一般来说，它的效果很好。

不过，我有这个问题是这样的......每一个“面板”包含了几个文本输入。如果用户到达面板中的最后一个输入，然后单击[TAB]（或iPad上的“下一步”按钮），Safari会自动移动滑动包装以将下一个文本输入显示到视图中。

当然，它只滑动包装就足以使下一个文字输入眼帘 - 这不足以使整个未来面板进入视野。

换句话说 - 让我们说，每个面板为600像素宽，我有三个板。

所以，如果用户到达第一个面板上的最后一个输入，然后点击TAB，我想包装600个像素移动到充分发挥下一面板进入视野。然而，浏览器只是滑动它，以便下一个文本输入是可见的。

有没有人遇到这个问题，并想出了一个强大的解决方案？

非常感谢您的任何建议和见解！

Answer 1

哈！我想到了！

问题是，当输入超出可见区域时，浏览器滚动 div使其可见。由于您的＃coda-slider或任何您称之为的ID没有滚动条，因此您无法看到发生了什么，也无法手动将其移回。

注意，该尾滑块不会改变滚动条的位置，所以即使尾声滑块移动时，它仍然被滚动偏移量偏移。

但是，只要＃coda-slider更改滚动位置，每次输入获得焦点时，您都​​可以简单地将滚动位置设置为0 。然后，你可以找出哪个输入标签，并触发尾声来做它的魔法。如果你的内容高度不同，你也可以使用scrollTop（0）。

$('#coda-slider-1').scroll(function() { 
    $('#coda-slider-1').scrollLeft(0); 
    $('#coda-slider-1').scrollTop(0); 
}); 

$('input').focus(function() { 
    var tabindex = $(this).parents('.panel').prevAll('.panel').size() + 1; 

    $('.tab' +tabindex +' > a').trigger('click'); 
}); 

这里举例：

http://jsfiddle.net/u99AJ/

更新：

事情更奇怪的是怎么回事Safari浏览器。这不起作用。

UPDATE2：

焦点和滚动的顺序似乎有在Safari一个奇怪的效果。例如更新的跨浏览器支持：

http://jsfiddle.net/u99AJ/4/

UPDATE3：

添加的代码（在下文中的jsfiddle例子）来解决办法结尾滑块臭虫animate在同一点击时仍称甚至标签。这可能会导致标签开关在某些情况下似乎延迟，特别是在通过输入快速切换时。

http://jsfiddle.net/u99AJ/7/