Remove input value on backspace keyup Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Remove input value on backspace keyup without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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 class="btn btn-info" id="search-ticket" type="submit">Search</button>
</form>

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' ]
  ;
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()
  }
  
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" name="btSearch">Search</button>
</form>
We are here to answer your question about Remove input value on backspace keyup - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji