1

全て、

jQueryスライダーのような「Coda」を実装しています（Niall Dohertyの優れた実装を使用しています：http ：//www.ndoherty.biz/2009/10/coda-slider-2/ ）。

一般的に、それはうまく機能します。

しかし、私が抱えている問題はこれです...各「パネル」にはいくつかのテキスト入力が含まれています。ユーザーがパネルの最後の入力に到達してから[TAB]（またはiPadの[次へ]ボタン）をクリックすると、Safariは自動的にスライドラッパーを移動して次のテキスト入力を表示します。

もちろん、ラッパーをスライドさせるのは、次のテキスト入力を表示するのに十分なだけです。次のパネル全体を表示するのに十分ではありません。

言い換えると、各パネルの幅が600ピクセルで、3つのパネルがあるとします。

したがって、ユーザーが最初のパネルの最後の入力に到達してから[TAB]をクリックした場合、ラッパーを600ピクセル移動して、次のパネルを完全に表示します。ただし、ブラウザはそれを十分にスライドさせるだけなので、次のテキスト入力が表示されます。

誰かがこの問題に遭遇し、堅牢な解決策を思いついたことがありますか？

アドバイスや洞察を事前に感謝します！

4

1 に答える 1

2

ハ！私はそれを考え出した！

問題は、入力が表示領域外にある場合、ブラウザがdivをスクロールして表示されることです。＃coda-slider、またはそれを呼び出すIDにはスクロールバーがないため、何が起こっているのかを確認したり、手動で元に戻したりすることはできません。

Note, that coda-slider does not alter the scroll position, so even if the coda-slider moves, it is still offset by the scroll offset.

However, you can simply set the scroll position to 0 every time an input gets focus whenever the #coda-slider changes scroll position. Then you can figure out which tab that input is in and trigger coda to do it's magic. You might as well scrollTop(0) as well, in case your content is different heights.

$('#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');
});

Example here:

http://jsfiddle.net/u99AJ/

Update:

Something even stranger is going on with Safari. This does not work.

Update2:

The order of focus and scroll seems to have a strange effect in Safari. Example updated for cross-browser support:

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

Update3:

Added code (in jsfiddle example below) to workaround coda-slider bug where animate is still called even when clicking on the same tab. This may cause the tab switch to seem to delay in some cases, especially when tabbing quickly through the inputs.

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

于 2010-12-10T21:58:10.880 に答える