How to trigger keyup function after certain number of strokes

Question

I have made a simple form where I should enter a phone number split into three section first input takes 3, second input takes 3 and last should take 4. I have set maxlength for the input elements, I'm calling the keyup to focus on to the next element. But instead of 3 strokes it jumps to the next input after I enter a single number.

Here's my codesandbox for you to play around

Here's my HTML

<div class="form-group" style="height:70px;">
  <label class="reg_txt">Phone Number  <span>*</span></label>
  <div class="clearfix"></div>
  <div class="wsite-form">
    <input type="text" class="text input-name1" formControlName="phone1" maxlength="3" (keyup)="nextStep($event,1)" (focus)="focused(1)" id="code1">
  </div>
  <div class="line">-</div>
  <div class="wsite-form">
    <input type="text" class="text input-name1" formControlName="phone2" maxlength="3" (keyup)="nextStep($event,2)" (focus)="focused(2)" id="code2">
  </div>
  <div class="line">-</div>
  <div class="wsite-form">
    <input type="text" class="text input-name1" formControlName="phone3" maxlength="4" (keyup)="nextStep($event,3)" (focus)="focused(3)" id="code3">
  </div>

</div>

Here's my component method

nextStep(event, step: number): void {
  const prevElement = document.getElementById('code' + (step - 1));
  const nextElement = document.getElementById('code' + (step + 1));
  console.log(event)
  if (event.code == 'Backspace' && event.target.value === '') {
    event.target.parentElement.parentElement.children[step - 2 > 0 ? step - 2 : 0].children[0].value = ''
    if (prevElement) {
      prevElement.focus()
      return
    }
  } else {
    if (nextElement) {
      nextElement.focus()
      return
    } else {

    }
  }
}

and also If I hit backspace it should jump to previous element it works for the second input box and it throws error for the last element. I know I made a silly mistake, could anybody point me in the right direction. I'll appreciate any help.

Answer 1

Adding this if (nextElement && event.target.value.length === 3) to your else statement at the bottom of nextStep() works instead of just if (nextElement).

If there is a next element to go to and the current length of the input is 3, focus on the next element.