Remove input value on backspace keyup-CodePudding

I have a small canonical lottery search form comprising of 6 input fields. Currently when the user backspaces once, it will remove the value and move to the previous input field.

I need to split the above process into two steps. Therefore one backspace removes the value, the second backspace moves to previous input field and repeat.

How can I achieve this by adding to my current jquery if/else statement?

$(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  id="search-ticket" type="submit">Search</button>
</form>

CodePudding user response：

I will do something like that:

some usefull information about key values

const 
  myForm     = document.querySelector('#my-form')
, valid_Keys = [...'0123456789','Backspace', 'ArrowLeft','ArrowRight']
, ignoreKeys = [ 'ArrowUp', 'ArrowDown' ]
  ;
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 )
    myForm[`keyword_${cInput}`].focus()
  }

#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  type="submit" name="btSearch">Search</button>
</form>

CodePudding user response：

Its working.

$(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  id="search-ticket" type="submit">Search</button>
</form>