0

自動タブを実装しようとしている ASP.NET Web フォーム プロジェクトがあります。jquery は初めてですが、自動タブを実行するためのコード スニペットをオンラインで見つけました。それを使用して複数のグループを自動タブしたいと考えています。テキストボックスの。

例えば：

Textbox1 -> Textbox2 -> Textbox3

Textbox4 -> Textbox5 -> Textbox6

だがしかし：

Textbox3 -> Textbox4

それが理にかなっていることを願っています。とにかく、私は次のコードを持っています：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".autotab").keyup(function () {
            if ($(this).attr("maxlength") == $(this).val().length) {
                var index = $(".autotab").index(this);
                var item = $($(".autotab")[++index]);
                if (item.length > 0)
                    item.focus();
            }
        });
        $(".autotab2").keyup(function () {
            if ($(this).attr("maxlength") == $(this).val().length) {
                var index = $(".autotab2").index(this);
                var item = $($(".autotab2")[++index]);
                if (item.length > 0)
                    item.focus();
            }
        });
    });
</script>

<input name="tbOne" type="text" maxlength="3" id="tbOne" class="autotab" />
<input name="tbTwo" type="text" maxlength="3" id="tbTwo" class="autotab" />
<input name="tbThree" type="text" maxlength="4" id="tbThree" class="autotab" />

<input name="tbFour" type="text" maxlength="3" id="tbFour" class="autotab2" />
<input name="tbFive" type="text" maxlength="3" id="tbFive" class="autotab2" />
<input name="tbSix" type="text" maxlength="4" id="tbSix" class="autotab2" />

コピー/貼り付けされたコードを 1 つの関数にリファクタリングするにはどうすればよいですか?

4

2 に答える 2

2

グループごとに 1 つのクラスを使用する必要がない、より一般的なソリューション:

// loop through adjacent pairs
$.fn.eachPair = function(f) {
    for(var i = 0, j = 1; j < this.length; i = j++)
        f.call(this[i], this[j]);
}

$.fn.autotab = function() {
    this.eachPair(function(next) {
        // add an event handler to focus the next field
        $(this).keyup(function() {
            if($(this).attr("maxlength") == $(this).val().length)
                $(next).focus();
        });
    });
}

$(document).ready(function () {
    $(".autotab").autotab();
    $(".autotab2").autotab();
});

補足として、$($(".autotab2")[++index])コード内の は次のように記述したほうがよいでしょう$(".autotab2").eq(index + 1)

于 2012-10-23T18:13:25.877 に答える
0

セレクターを .next() に渡すことで、要素を制限できます。これは、入力に 1 つのクラスのみが割り当てられており、それらがすべて兄弟であると想定しています。

// get all inputs with class that start with autotab
$("input[class^=autotab]").keyup(function() {
    var $el = $(this);
    // get nextfield with same class
    var nextField = $el.next('.'+$el.attr('class'));
    if($el.attr("maxlength") == $el.val().length){
        // if true - give next field with same class focus
        $el.next().focus();
    }
});​

http://jsfiddle.net/JaVaR/

または、それらが兄弟であることが保証されていない場合.. .eq() を使用して現在のインデックスを取得し、1 ずつインクリメントできます。これは、現在の要素クラスに一致する要素のコレクションを取得し、現在のインデックスを取得して次のフィールドを見つけます

$("input[class^=autotab]").keyup(function() {
    var $el = $(this);
    // gets all inputs with same class
    var $inp = $('.'+$el.attr('class'));
    // gets next input with same class
    var nextField = $inp.eq($inp.index(this)+1);
    if($el.attr("maxlength") == $el.val().length){
        nextField.focus();
    }
});​

http://jsfiddle.net/L4MEP/

于 2012-10-23T18:27:23.567 に答える