Question

我有一个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" />

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

Answer 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)}

Answer 2

您可以通过将选择器传入.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（）获取当前索引并增加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/

如何简化此jquery脚本？

2 个答案: