搜索表单的反向 Keyup 功能

Question

我有一个包含 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>

Answer 1

检测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>

Answer 2

您只需在 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>

搜索表单的反向 Keyup 功能

Reverse Keyup function for search form

html

jquery

keyup

onkeyup