Question

当文本框值长度达到最大值时，我希望它移动到下一个选项卡，或者3秒后它移动到下一个选项卡。这是我的代码：

$(".tab").keyup(function () {
    var get = $(this);
    if (get.val().length == this.maxLength) {
      get.next('tr .tab').focus();
    }
    else {
        setTimeout(function () {
            get.next('tr .tab').focus();
        }, 3000);
    }
});

当光标位置为1时，它会移动2.但是当光标位于2时，它不会移动3. enter image description here 这是HTML代码：

<table cellspacing="0" cellpadding="0">
    <tr>
      <td class="tds">Year / Number</td>
      <td><input name="year" type="text" class="inputbox tab" maxlength="4" style="width:25px;" /> / <input name="number" type="text" class="inputbox tab" maxlength="2" style="width:25px;"/></td>
    </tr>
    <tr>
      <td class="tds">Caption:</td>
      <td><input name="caption" type="text" class="inputbox tab" style="width:500px;" /></td>
    </tr>
    <tr>
      <td class="tds">Description:</td>
      <td><input name="desc" type="text" class="inputbox tab" style="width:500px;" /></td>
    </tr>
</table>

如果光标在1到2之间，如果它在2到3之后以及之后是3到4，我该如何管理聚焦？

Answer 1

<强> LIVE DEMO

var timeo,                      // Used for our timeout
    $TAB = $('.tab');           // Cache all your input elements for reuse           

$TAB.keyup(function () {

    clearTimeout(timeo);        // Clear timeout as you type

    var $el = $(this),          // cache element
        val = this.value,       // get value
        len = this.maxLength,   // get length
        i = $TAB.index( this ); // get the index of current one
                                // so we can increase it using +1      
    if (len != -1 && val.length >= len) {
        $TAB.eq(i+1).focus();
    }
    timeo = setTimeout(function () {
        $TAB.eq(i+1).focus();
    }, 3000);

});

我会尝试通过您的问题解释我的更改：

您的input元素并非都位于同一个<TD>父级内，因此您无法使用.next()来获取.... {...> - 下“。
将所有输入缓存在$TAB变量中。现在在keyup内，我们需要跟踪当前使用的输入的index，而不是增加i = $TAB.index( this );的值，您可以从我们的input中获取下一个索引$TAB元素集合$TAB.eq(i+1) // is the next one in collection即：
setTimeout
您没有正确清除timeo，因此无需等待我们完成输入就会打勾。我使用timeout变量来存储if (len != -1，但也允许我们在输入字段时清除它。
此外，maxlength将确保元素具有&& val.length >= len) {属性，{{1}}将检查输入的值是否大于允许的最大长度。

jquery autotab不会标记下一行

1 个答案: