如何在一定数量的笔划后触发 keyup 功能

Question

我做了一个简单的表格，我应该输入一个 phone 数字，分成三部分，第一个输入需要 3 个，第二个输入需要 3 个，最后一个应该需要 4 个。我已经设置了 maxlength输入元素，我调用 keyup 来关注下一个元素。但是在我输入一个数字后，它不会跳到下一个输入，而不是 3 笔画。

这是我的 codesandbox 给你玩

这是我的 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>

这是我的组件方法

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 {

    }
  }
}

而且如果我按下退格键，它应该跳转到前一个元素，它适用于第二个输入框，它会为最后一个元素抛出错误。我知道我犯了一个愚蠢的错误，任何人都可以指出我正确的方向。我将不胜感激任何帮助。

Answer 1

将此 if (nextElement && event.target.value.length === 3) 添加到 nextStep() 底部的 else 语句而不只是 if (nextElement).

如果有下一个元素要转到并且输入的当前长度为3，则关注下一个元素。

Answer 2

您还可以创建指令 (*)，例如

@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){}
}

你可以使用 like

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

见stackbliz

(*)不要忘记包含在模块的声明中

更新是的，我也认为使用模板引用变量和[prev]和[next]有点复杂，为什么不改进？

为此我们使用两个指令

@Directive({
  selector: 'input[maxlength]',
  exportAs: 'child'
})
export class MaxLengthDirective {

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

@Directive({
  selector: '[maxLengthGroup]',
  exportAs: 'maxLengthGroup'
})
export class MaxLengthGroupDirective {
  @ContentChildren(MaxLengthDirective) items:QueryList<MaxLengthDirective>
  next(item:MaxLengthDirective)
  {

     const index=this.items.toArray().findIndex(x=>x==item);
     if (index<this.items.length-1)
     {
       const nextItem=this.items.find((_,i)=>i>index)
       nextItem.elementRef.nativeElement.focus()
     }
  }
  prev(item:MaxLengthDirective)
  {
    const index=this.items.toArray().findIndex(x=>x==item);
    if (index>0)
    {
      const prevItem=this.items.find((_,i)=>i==index-1)
      prevItem.elementRef.nativeElement.focus()
    }
  }
}

最大长度组使用 ContentChildren 获取最大长度。所以我们在 QueryList 中有所有具有 matlength 的输入。 “next”和“prev”中的两个功能是关注上一个或下一个元素。为此，我们需要使用 @Host 在 mat-length 中注入 max-length-group 以指示 Angular 搜索此指令。使用就好

<div max-length-group>
  <input maxlength="3" placeholder="max 3" />
  <input placeholder="max 4" maxlength="4" />
  <input placeholder="max 5" maxlength="5" />
</div>

new stackblitz

如何在一定数量的笔划后触发 keyup 功能

How to trigger keyup function after certain number of strokes

javascript

typescript

angular

angular-forms