Este es un formulario de código de verificación, y quiero mostrar el número ingresado en la entrada amarilla, pero el problema es que cuando ingresa 4 números, luego ingresa números nuevos o actualiza los números antiguos, la entrada amarilla no está actualizada, y quiero mostrar el número solo en la entrada amarilla si las 4 entradas tienen valor, si no, borre la entrada amarilla.
var code = []; $('.verf-code input').keyup(function(e) { var key = e.which; var val = $(this).val(); $(this).each(function() { if (key >= 48 && key <= 57) { $(this).next('input').select().focus(); code.push(val); return true; } else { return false; } }); if (code.length <= 4) { $('.verification-code').val(code.join('')); } else { code = []; } }); .verification-code { background: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="verf-code"><input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" /></div> <input type="text" class="verification-code"> var code = []; $('.verf-code input').on("input", function(e) { this.value = this.value.match(/\d/) || ""; if (this.value.length === 1) { $(this).next('input').select().focus(); code[$(this).index()] = this.value const vc = code.join('') $('.verification-code').val(vc.length === 4 ? vc : ''); } }); .verification-code { background: yellow; width: 72px; } .verf-code { width: 80px; display: flex; flex-wrap: wrap; align-items: stretch; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="verf-code"> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="1" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="2" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="3" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="4" /> <input type="text" class="verification-code" readonly> </div>No necesita un bucle adicional ( each ) en su evento keyup . Debe actualizar la matriz de code en cada posición que uso index para hacer eso.
Aquí está la muestra de trabajo:
var code = []; $('.verf-code input').keyup(function (e) { var key = e.which; var val; if (key >= 48 && key <= 57) { val = $(this).val(); } else val = "-1"; $(this).next('input').select().focus(); code[$(this).index()] = (val); if (code.length == 4 && !code.includes("-1")) $('.verification-code').val(code.join('')); else $('.verification-code').val(''); }); .verification-code { background: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="verf-code"> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" /> <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" /> </div> <input type="text" class="verification-code">Usaría un atributo data-id para realizar un seguimiento de qué entrada tiene un valor.
Luego, filtraría la matriz de code para eliminar cualquier valor vacío y lo usaría para determinar si su entrada de verificación debe tener un valor:
var code = []; $('.verf-code input').keyup(function(e) { var key = e.which; var val = $(this).val(); code[$(this).attr("data-id")] = $(this).val(); $(this).each(function(index) { if (key >= 48 && key <= 57) { $(this).next('input').select().focus(); return true; } else { return false; } }); var filtered = code.filter(function (el) { return el != ""; }); if (filtered.length == 4) { $('.verification-code').val(code.join('')); } else { $('.verification-code').val(''); } }); .verification-code { background: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="verf-code"> <input data-id="0" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" /> <input data-id="1" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" /> <input data-id="2" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" /> <input data-id="3" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" /> </div> <input type="text" class="verification-code">