Question

所有

我正在实现一个类似jQuery滑块的“Coda”（我正在使用Niall Doherty的优秀实现：http://www.ndoherty.biz/2009/10/coda-slider-2/）。

一般来说，效果很好。

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

当然，它只是滑动包装器，足以将下一个文本输入带入视图 - 不足以将整个下一个面板放入视图中。

换句话说 - 假设每个面板的宽度为600px，我有三个面板。

因此，如果用户到达第一个面板上的最后一个输入，然后单击TAB，我希望包装器移动600像素以使下一个面板完全进入视图。但是，浏览器只需滑动它就可以看到下一个文本输入。

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

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

Answer 1

哈！我想通了！

问题是，当输入超出可见区域时，浏览器滚动 div，使其可见。由于您的#coda-slider或您调用的任何ID都没有滚动条，因此您无法看到正在发生的情况，也无法手动将其移回。

注意，coda-slider不会改变滚动位置，因此即使coda-slider移动，它仍然会被滚动偏移量偏移。

但是，每当#coda-slider更改滚动位置时，您可以在每次输入获得焦点时将滚动位置设置为0 。然后你可以找出输入的选项卡并触发coda来实现它的魔力。您也可以使用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示例中）以解决方法coda-slider错误，即使单击同一选项卡，仍然会调用animate。在某些情况下，这可能会导致制表符开关延迟，尤其是在通过输入快速制表时。

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

在每个“面板”上实现一个“Coda-like”jQuery滑块，其中包含表单

1 个答案: