Focus and enable next input once reaching maxlength value

Question

How can I enable and focus next input when maxlength is reached?

<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>

Does this answer your question? [Focus next input once reaching maxlength value](https://stackoverflow.com/questions/15595652/focus-next-input-once-reaching-maxlength-value) — rm_, Jun 10 '21 at 08:45
I already tried that one but I dont know how to make it work with my code — alin11g, Jun 10 '21 at 08:51

score 2 · Accepted Answer · answered Jun 10 '21 at 08:55

To achieve this you can compare the length of the value in the field to the maxlength property in the input event handler. From there you can enable and focus() on the next input. Try this:

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>

Focus and enable next input once reaching maxlength value

1 Answers1