达到输入数字 maxlength 时移动焦点

Question

我有一个表格，用户必须输入他们的出生日期：

<div class="form-group">
      <label for="day" class="sr-only">[[%day]]</label>
      <input type="number" min="0" max="31" maxlength="2" class="form-control input-lg name="day" value="[[+day]]" placeholder="day">
</div>
<div class="form-group">
      <label for="day" class="sr-only">[[%day]]</label>
      <input type="number" min="0" max="31" maxlength="2" class="form-control input-lg name="day" value="[[+month]]" placeholder="month">
</div>
<div class="form-group">
      <label for="day" class="sr-only">[[%day]]</label>
      <input type="number" min="0" max="31" maxlength="4" class="form-control input-lg name="day" value="[[+year]]" placeholder="year">
</div>

我了解，type="number" 不支持属性maxlength。

我必须这样做：

当客户在day 中输入 2 位数字时，下一个输入字段会自动聚焦，依此类推...只允许输入数字。

谢谢！

Answer 1

试试这样的。 （需要导入jquery lib）

<input type="number" id="date">
<input type="number" id="date">

<script>
  txt_day=$("#day");
  txt_year=$("#year");
  txt_day.change(function(){
     if(tt_day.val().length;
     txt_year.focus();
  }

</script>