填充4个字符时自动选项卡到下一个输入字段

Question

我想要做的是,填写四个字符时指向下一个标签.每个字段应该有4个字符,一旦完成,它应该移动到下一个输入框.

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

小提琴.

Answer 1

您的代码工作正常,但您的输入元素设置为type="number".非数字内容被忽略,所以如果你输入"ABCD",例如,输入的value是空的(意思是length的0).另一方面,如果输入"1234",则输入的值为1234.

如果您希望在输入非数字内容时触发代码,只需将每个输入的类型更改为text.

<input class="inputs" type="text" maxlength="4" />

JSFiddle演示.

请注意,我也class从该示例中的每个元素中删除了重复属性.

正如krish在您的问题的评论中提到的那样,您的代码存在一个问题,即最后一个input元素将继续接受超过4个字符.要解决此问题,请检查以确保存在next('.inputs')元素:

if (this.value.length == this.maxLength) {
  var $next = $(this).next('.inputs');
  if ($next.length)
      $(this).next('.inputs').focus();
  else
      $(this).blur();
}

JSFiddle演示.