搜索表格的反向键位 function

Question

I have a small lottery search form comprising of 6 input fields. Once the user enters a number, it moves to the next field using a Jquery keyup function.

How can I add a reverse event, so when I delete a number using the delete button, it moves to the previous field?

 $(function() { $("#target input").keyup(function() { 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); } }); });

 <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

You can simply add a check for the backspace key as the first statement in your if/else if/else block:

if (e.key === 'Backspace') {
  $(this).prev('input').focus();
} else if {
  // Rest of your logic here
}

See proof-of-concept below:

 $(function() { $("#target input").keyup(function(e) { if (e.key === 'Backspace') { $(this).prev('input').val('').focus(); } else 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); } }); });

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

Detect the keycode of the keyup event, if the keycode is backspace ( should be "event.keyCode == 8" ) and the input is empty fire focus on the previous input.