Select previous sibling of input by backspace in javascript

user_17941475 0
Viewed 46

I have an input field with the name box. I can move forward after input by

box.addEventListener('input', function () {
  if(!isNaN(parseInt(box.value))){
    box.value = "";
  }else if(box != null){
    box.nextSibling.focus();
  }
});

And it's working alright. I wish to move to the previous sibling of the input by backspace, and I am doing it by the previous sibling and kind of the same logic

box.addEventListener('keyup', function (e) {
  if(e.key == 'Backspace' && box != null){ 
    box.previousSibling.focus();
  }
})

But doing this only works for the first backspace properly, for the rest of the inputs I need to backspace twice. I tried with the keydown event too and even that wasn't perfect.

input javascript
1 Answers

The problem is that (in the browsers you and I are using) input events are processed before keyup events, so you press backspace on a non-empty box and a character is deleted, so input is processed then the next sibling is selected, then the keyup is processed and you move to the previous sibling, which looks like going nowhere.

You can fix this by storing the box where the value changed, then if that reference is not null on backspace keyup you can move to the previous sibling of the box where the keyup event fired, otherwise move to the previous sibling of the box where the input event fired.

const boxes = document.getElementById('boxes');
let inputInput = null;
for(let i = 0; i < 12; i++)
{
  const box = document.createElement('input');
  box.type="text"
  box.addEventListener('input', function (e) 
  {
    if(!isNaN(parseInt(box.value)))
    {
      box.value = "";
    }
    else if(box != null)
    {
      inputInput = box;
      box.nextSibling.focus();
      
    }
  });
  box.addEventListener('keyup', function (e) 
  {
    if(e.key == 'Backspace' && box != null)
    {
      if(inputInput == null)
      {
        box.previousSibling.focus();
      }
      else
      {
        inputInput.previousSibling.focus();
        inputInput = null;
      }
    }
  });
  boxes.appendChild(box);
}
<div id="boxes">
</div>

The problem with this solution is that event precedence is not part of the specification, so this is not necessarily cross browser compatible, i.e. in some browsers keyup might happen before input.

user_2047230
Related