Tengo un pequeño formulario de búsqueda de lotería canónica que consta de 6 campos de entrada. Actualmente, cuando el usuario retrocede una vez, eliminará el valor y pasará al campo de entrada anterior.
Necesito dividir el proceso anterior en dos pasos. Por lo tanto, un retroceso elimina el valor, el segundo retroceso se mueve al campo de entrada anterior y repite.
¿Cómo puedo lograr esto agregando a mi declaración jquery if/else actual?
$(function() { $("#target input").keyup(function(event) { if ($(this).val().length == 1) { $(this).nextAll('input').first().focus(); } else if ($(this).val().length > 1) { var new_val = $(this).val().substring(1, 2); $(this).val(new_val); $(this).nextAll('input').first().focus(); } else if (event.keyCode == 8) { if ($(this).prev('input')) { $(this).prev('input').focus(); } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form id="target"> <input type="number" id="keyword_1" maxlength="1" min="0" max="9" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_2" maxlength="1" min="0" max="9" name="keyword_2" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_3" maxlength="1" min="0" max="9" name="keyword_3" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_4" maxlength="1" min="0" max="9" name="keyword_4" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_5" maxlength="1" min="0" max="9" name="keyword_5" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_6" maxlength="1" min="0" max="9" name="keyword_6" style="width: 35px !important; etter-spacing: 1.5px;"> <button class="btn btn-info" id="search-ticket" type="submit">Search</button> </form>Haré algo así:
alguna información útil sobre los valores clave
const myForm = document.querySelector('#my-form') , valid_Keys = [ ...'0123456789', 'Backspace', 'ArrowLeft', 'ArrowRight' ] , ignoreKeys = [ 'ArrowUp', 'ArrowDown', 'Tab' ] ; myForm.keyword_1.focus() // on page load document.onkeydown = e => { if ( !e.target.matches('#my-form input[type=number]') || ignoreKeys.includes(e.key) ) return e.preventDefault() // disable key action (letters or what else? if (!valid_Keys.includes(e.key) ) return let cInput = +e.target.name.replace(/\D+/g, '') // get numeric value from name ( 1...6 ) if ( e.key==='Backspace') if (e.target.value !== '' ) e.target.value = '' else cInput-- else if (e.key === 'ArrowRight') cInput++ else if (e.key === 'ArrowLeft') cInput-- else myForm[`keyword_${cInput++}`].value = e.key if (cInput<1) cInput = 1 if (cInput>6) cInput = 6 myForm[`keyword_${cInput}`].focus() } myForm.onsubmit = e => // for testing { e.preventDefault() let values = Object.fromEntries( new FormData(myForm).entries() ) console.clear() console.log( JSON.stringify(values)) } #my-form input[type=number] { width : 35px; letter-spacing : 1.5px; } <form id="my-form"> <input type="number" min="0" max="9" name="keyword_1" value=""> <input type="number" min="0" max="9" name="keyword_2" value=""> <input type="number" min="0" max="9" name="keyword_3" value=""> <input type="number" min="0" max="9" name="keyword_4" value=""> <input type="number" min="0" max="9" name="keyword_5" value=""> <input type="number" min="0" max="9" name="keyword_6" value=""> <button class="btn btn-info" type="submit" > Search </button> </form>Esta funcionando.
$(function() { $("#target input").keyup(function(event) { if ($(this).val().length == 1) { $(this).nextAll('input').first().focus(); } else if ($(this).val().length > 1) { var new_val = $(this).val().substring(1, 2); $(this).val(new_val); $(this).nextAll('input').first().focus(); } }); $("#target input").keydown(function(event) { if (event.keyCode == 8 && $(this).val().length == 0) { if ($(this).prev('input')) { $(this).prev('input').focus(); } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form id="target"> <input type="number" id="keyword_1" maxlength="1" min="0" max="9" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_2" maxlength="1" min="0" max="9" name="keyword_2" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_3" maxlength="1" min="0" max="9" name="keyword_3" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_4" maxlength="1" min="0" max="9" name="keyword_4" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_5" maxlength="1" min="0" max="9" name="keyword_5" style="width: 35px !important; etter-spacing: 1.5px;"> <input type="number" id="keyword_6" maxlength="1" min="0" max="9" name="keyword_6" style="width: 35px !important; etter-spacing: 1.5px;"> <button class="btn btn-info" id="search-ticket" type="submit">Search</button> </form>