How to trigger keyup function after certain number of strokes-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

You can also create a directive (*) like

@Directive({
  selector: 'input[maxlength]',
  exportAs: 'child'
})
export class MaxLengthDirective {
  @Input()prev:HTMLElement;
  @Input()next:HTMLElement;

  @HostListener('keyup',['$event']) _(event:any){
     if (!event.target.value && this.prev && event.key=='Backspace')
       this.prev.focus()
     if (event.target.value.length==this.maxLength && this.next)
      this.next.focus()
  }
  constructor(@Attribute('maxlength') private maxLength:number){}
}

You can use like

<input #one maxlength="3" [next]="two">
<input #two [prev]="one" [next]="three" maxlength="4">
<input #three [prev]="two" maxlength="5">

See the stackbliz

(*)Don't forget include in declarations of your module