达到 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 函数访问输入 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" />

Answer 2

使用不同的方法。Angular 不像 jQuery 那样从现有 DOM 中选择元素并读取属性，因为 Angular 从数据生成 DOM。因此，如果可能的话，读取输入的maxlength属性是很困难的，而且无论如何，“非角度”都会很笨拙。

相反，使用不同的方法并在函数中传递 maxLength keyup：

<input type="text" (keyup)="keytab($event, 2)" />
<input type="text" (keyup)="keytab($event, 4)" />


keytab(event, maxLength){
   console.log(maxlength); // 2 or 4
   // .......
}