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" />

如何将复制/粘贴的代码重构为单个函数？

4

2 回答 2

2

一种更通用的解决方案，不需要您每组使用一个类：

// 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() 来限制元素 - 这是假设您只有一个类分配给您的输入并且它们都是兄弟姐妹。

// 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() 获取当前索引并加一。这将获取与当前元素类匹配的元素集合，然后获取当前的索引以查找下一个字段

$("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 回答