每個「面板」

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/