達到 maxlength 值后聚焦並啟用下一個輸入

Question

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

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