javascript - 达到 maxLength 时将输入焦点移至下一个输入 - Angular 4/Typescript

Question

当用户在第一个输入字段中输入了 maxLength 数量的字符时，我想将焦点从一个输入字段移动到另一个输入字段。因此，在我下面的示例中，当用户在日输入中输入 2 个字符时，焦点将移至月输入。

到目前为止，这是我的代码:

<input formControlName="day" maxlength="2" placeholder="DD" type="text" (keyup)="keytab($event)" />
<input formControlName="month" maxlength="2" placeholder="MM" type="text" (keyup)="keytab($event)" />
<input formControlName="year" maxlength="4" placeholder="YYYY" type="text" />

在我的 TS 文件中:

 keytab(event){
    let nextInput = event.srcElement.nextElementSibling; // get the sibling element

    var target = event.target || event.srcElement;
    var id = target.id
    console.log(id.maxlength); // prints undefined

    if(nextInput == null)  // check the maxLength from here
        return;
    else
        nextInput.focus();   // focus if not null
}

我知道我的 TS 文件中的代码是错误的，但我试图找到一种获取 maxLength 属性然后转移焦点的方法。现在，只要输入字段中有按键，焦点就会移动。

谁能告诉我如何从 keytab 函数访问 inputs maxLength 属性？谢谢。

我正在使用 Angular 4。

编辑 - 我正在尝试获取 maxLength 值，然后与输入值长度进行比较。如果输入值更多，则将焦点移动到输入字段。

Answer 1

这是一个通用的(指令)解决方案，当达到最大长度时移动到下一个类似的控件类型

1- 创建指令

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: 'input[moveNextByMaxLength], textarea[moveNextByMaxLength]',
})
export class MoveNextByMaxLengthDirective {
  @HostListener('keyup', ['$event']) onKeyDown(keyboardEvent: KeyboardEvent) {
    const target = keyboardEvent.target as
      | HTMLInputElement
      | HTMLTextAreaElement
      | null;

    if (!target || target.maxLength !== target.value.length) return;

    keyboardEvent.preventDefault();

    const { type } = target;
    let { nextElementSibling } = target;

    while (nextElementSibling) {
      if (
        (nextElementSibling as HTMLInputElement | HTMLTextAreaElement).type ===
        type
      ) {
        (nextElementSibling as HTMLInputElement | HTMLTextAreaElement).focus();
        return;
      }

      nextElementSibling = nextElementSibling.nextElementSibling;
    }
  }
}

2- 在模块中声明指令

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    MoveNextByMaxLengthDirective 
  ],
  bootstrap: [ AppComponent ]
})

3- 在组件中使用指令

<input formControlName="day" maxlength="2" moveNextByMaxLength placeholder="DD" type="text" (keyup)="keytab($event)" />
<input formControlName="month" maxlength="2" moveNextByMaxLength placeholder="MM" type="text" (keyup)="keytab($event)" />
<input formControlName="year" maxlength="4" placeholder="YYYY" type="text" />