搜索表单的反向 Keyup 功能

Reverse Keyup function for search form

我有一个包含 6 个输入字段的小型彩票搜索表单。用户输入数字后,它会使用 Jquery keyup 函数移动到下一个字段。

如何添加反向事件,以便当我使用删除按钮删除号码时,它会移动到上一个字段?

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

检测keyup事件的键码,如果键码是退格键(应该是"event.keyCode == 8")并且输入为空,则将焦点放在上一个输入上。

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

您只需在 if/else if/else 块中的第一条语句中添加退格键检查即可:

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

见下文proof-of-concept:

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