0

2 つ以上の電話番号を受信するための次の html があります。

<div data-bind="foreach: Telephones" id="Telephones">
<div class="inlinediv">
                    <input maxlength="3" size="3" type ="text" data-bind="value: Prefixe" class="tab1 no-margin" style="width: 40px;" />
                    <input maxlength="3" size="3" type ="text" data-bind="value: Telephone" class="tab2 no-margin" style="width: 40px;" />
                    <input maxlength="4" size="4" type ="text" data-bind="value: Suffixe" class="tab3 no-margin" style="width: 60px;" />
                </div>
<div class="inlinediv">
                    <input maxlength="3" size="3" type ="text" data-bind="value: Prefixe" class="tab1 no-margin" style="width: 40px;" />
                    <input maxlength="3" size="3" type ="text" data-bind="value: Telephone" class="tab2 no-margin" style="width: 40px;" />
                    <input maxlength="4" size="4" type ="text" data-bind="value: Suffixe" class="tab3 no-margin" style="width: 60px;" />
                </div>
</div>

autotab ライブラリを使用して、タブを使用せずに数値を入力しています。

$("#Telephones .tab1").autotab({ target: $("#Telephones .tab1").next("#Telephones .tab2"), format: "numeric" });
$("#Telephones .tab2").autotab({ previous: $("#Telephones .tab1"), target: $("#Telephones .tab2").next("#Telephones .tab3"), format: "numeric" });
$("#Telephones .tab3").autotab({ previous: $("#Telephones .tab2"), target: $("#Telephones .tab3").next().next("#Telephones .tab4"), format: "numeric" });

私が抱えている問題は、タブが常に最後の「inlinediv」要素に移動するように見えることです。つまり、最初の番号の最初の入力が最後の電話番号の 2 番目の要素、この場合は 2 番目の要素に自動タブされます。セレクターを変更する必要があるだけだと感じていますが、autotab 関数では機能しないように見える $(this) を使用せずにそれを行う方法がわかりません。

4

1 に答える 1

1

ドキュメントを見ると、特に複数の一致がある場合にセレクターを指定する方法はありません。autoTabstargetプロパティが実行時に評価される関数を使用していれば (多くのプラグインがそうであるように)、簡単にそれを達成できたはずですが、フラット セレクターではこのタブ 1 のインスタンスごとに言うことができないため、これが私には解決策のように思えます。次の tab2 を選択します。#Telephones .tab1をすべて選択します.tab1。

var format = 'numeric';
$('#Telephones .inlinediv').each(function(){

    var $this = $(this);
        $tab1 = $this.find('.tab1'), 
        $tab2 = $this.find('.tab2'), 
        $tab3 =  $this.find('.tab3'),
        $next = $this.next().find('.tab1');

    $tab1.autotab({
        target: $tab2,
        format: format
     });
     $tab2.autotab({
        previous:$tab1,
        target: $tab3,
        format: format
     });
     $tab3.autotab({
        previous:$tab2,
        target: $next,
        format: format
   });

});

デモ

于 2013-10-08T21:23:32.720 に答える