javascript跳到Maxlen上的下一个表单字段

时间:2013-10-31 17:51:18

标签: javascript jquery asp.net forms

我有一个收集电话号码的表单,有3个字段,当用户输入特定字段中数字的maxLen时,我想自动跳转到下一个输入字段,似乎无法正常工作

HTML

<!-- Other inputs above -->
  <label>Telephone Number</label>
  <input type="text" class="phone" size="3" maxlength="3" onkeyup="checkLen(this,this.value)">
  <input type="text" class="phone" size="3" maxlength="3" onkeyup="checkLen(this,this.value)">
  <input type="text" class="phone" size="4" maxlength="4" onkeyup="checkLen(this,this.value)">

asp.net后端所以ID都是动态生成的,因此难以通过ID获取元素。

的javascript

function checkLen(x, y) {
    if (y.length == x.maxLength) {
        var next = x.tabIndex;
        if (next < document.getElementsByClassName("phone").length) {
            document.getElementsByClassName("phone").elements[next].focus();
        }
    }
}

1 个答案:

答案 0 :(得分:4)

假设您使用的是jQuery。

您可以将其移至下一个输入,而不是尝试使用tabindex

$(".phone").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.phone').focus();
    }
});

同样删除onclick属性处理程序,因为你像上面那样绑定它。