达到 maxlength 值后聚焦并启用下一个输入答案

【问题标题】：Focus and enable next input once reaching maxlength value达到 maxlength 值后聚焦并启用下一个输入
【发布时间】：2021-08-27 06:09:46
【问题描述】：

当达到 maxlength 时，如何启用并聚焦下一个输入？

<fieldset class="contenedor-fecha">
  <div class="contenedor-fecha-interior">
    <div class="contenedor-input-fecha"><input maxlength="1" class="input-fecha" placeholder="D" type="text"></div>
    <div class="contenedor-input-fecha elemento1"><input maxlength="1" class="input-fecha" placeholder="D" type="text" disabled></div>

    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="M" type="text" disabled></div>
    <div class="contenedor-input-fecha elemento2"><input class="input-fecha" maxlength="1" placeholder="M" type="text" disabled></div>

    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
  </div>
</fieldset>

【问题讨论】：

这能回答你的问题吗？ Focus next input once reaching maxlength value
我已经试过了，但我不知道如何让它与我的代码一起工作

标签： javascript jquery

【解决方案1】：

为此，您可以将字段中值的长度与input 事件处理程序中的maxlength 属性进行比较。从那里您可以在下一个input 上启用和focus()。试试这个：

let $inputs = $('.contenedor-fecha-interior input').on('input', e => {
  let $input = $(e.target);
  let index = $inputs.index($input);
  
  if ($input.val().length >= $input.prop('maxlength')) {
    $inputs.eq(index + 1).prop('disabled', false).focus();
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="contenedor-fecha">
  <div class="contenedor-fecha-interior">
    <div class="contenedor-input-fecha"><input maxlength="1" class="input-fecha" placeholder="D" type="text"></div>
    <div class="contenedor-input-fecha elemento1"><input maxlength="1" class="input-fecha" placeholder="D" type="text" disabled></div>

    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="M" type="text" disabled></div>
    <div class="contenedor-input-fecha elemento2"><input class="input-fecha" maxlength="1" placeholder="M" type="text" disabled></div>

    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
    <div class="contenedor-input-fecha"><input class="input-fecha" maxlength="1" placeholder="Y" type="text" disabled></div>
  </div>
</fieldset>

【讨论】：