CODEWITHSUNDEEP
htmljquerykeyuponkeyup
SavPhill
SavPhill

Reputation: 655

Reverse Keyup function for search form

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>

Upvotes: 0

Views: 331

Answers (2)

Mike M
Mike M

Reputation: 71

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.

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

Upvotes: 1

Terry
Terry

Reputation: 66113

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>

Upvotes: 1

Related Questions