Remove input value on backspace keyup

Question

I have a small canonical lottery search form comprising of 6 input fields. Currently when the user backspaces once, it will remove the value and move to the previous input field.

I need to split the above process into two steps. Therefore one backspace removes the value, the second backspace moves to previous input field and repeat.

How can I achieve this by adding to my current jquery if/else statement?

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

Answer 1

I will do something like that:

some usefull information about key values

 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>

Answer 2

Its working.

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