Remove input value on backspace keyup

Question

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();
        }
    }
});
});

user_10669010 · Answer

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', '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;
  }

user_12182527 · Answer

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();
      }
    }
  });
});

Remove input value on backspace keyup

2 Answers