删除退格键上的输入值

Question

我有一个包含 6 个输入字段的小型规范彩票搜索表单。目前，当用户退格一次时，它将删除该值并移至上一个输入字段。

我需要把上面的过程分成两步。因此，一个退格键删除值，第二个退格键移动到上一个输入字段并重复。

如何通过添加到我当前的 jquery if/else 语句来实现此目的？

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

我会做类似的事情：

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

正在运行。

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

删除退格键上的输入值

Remove input value on backspace keyup

javascript

jquery

keyup