maxLengthに達すると、入力フォーカスを次の入力に移動します。 - 角4/Typescript

Question

ユーザーが最初の入力フィールドにmaxLength分の文字を入力したときに、入力フィールドから別の入力フィールドにフォーカスを移動します。したがって、以下の私の例では、ユーザーが1日入力に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プロパティにアクセスする方法を教えていただけますか？ありがとう。

私はを使用しています。アングル4です。

編集 - 私はmaxLength値を取得し、入力値の長さと比較しようとしています。入力値が大きい場合は、フォーカスを入力フィールドに移動します。

Answer 1

別のアプローチを使用してください。 Angularは、データからDOMを生成するため、jQueryのように既存のDOMから要素を選択したり属性を読み込んだりしません。入力のmaxlength属性を読み込むことは、可能な場合は難しいので、とにかく「非Angulary」とは思えません。あなたがいるなら、JS

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


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

Answer 2

ピュアなアプローチ

let allInputs = document.getElementsByTagName('input'); 
 
let index = 0; 
 
for(i=0;i<allInputs.length;i++) { 
 
allInputs[i].onkeydown =trackInputandChangeFocus; 
 
} 
 

 
function trackInputandChangeFocus() { 
 
let allInputsArr = Array.from(allInputs); 
 
let presentInput = allInputsArr.indexOf(this) 
 
if(this.value.length == parseInt(this.getAttribute('maxlength'))) { 
 
     let next; 
 
     if(presentInput != 2) next = allInputsArr[presentInput+1] 
 
     else next = allInputsArr[0] 
 
     next.focus(); 
 
    } 
 
}

<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" />

Answer 3

ジャストアイデアが、：

代わりに、別のアプローチを使用してkeyup機能でmaxLengthのを渡します反応形式を使用すると、次のようなことができます。

import { FormGroup, FormBuilder, Validators } from "@angular/forms"; 
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; 
import "rxjs/add/operator/filter"; 

@Component({ 
    selector: "app-form", 
    template: ` 
    <form [formGroup]="form"> 
     <input formControlName="day" placeholder="DD" type="text" #day /> 
     <input formControlName="month" placeholder="MM" type="text" #month /> 
     <input formControlName="year" placeholder="YYYY" type="text" #year /> 
    </form> 
` 
}) 
export class FormComponent implements OnInit { 
    form: FormGroup; 

    @ViewChild("day") dayElement: ElementRef; 

    @ViewChild("month") monthElement: ElementRef; 

    @ViewChild("year") yearElement: ElementRef; 

    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 
    const dayMaxLength = 2; 
    const monthMaxLength = 2; 
    const yearMaxLength = 4; 

    this.form = this.fb.group({ 
     day: ["", [Validators.required, Validators.maxLength(dayMaxLength)]], 
     month: ["", [Validators.required, Validators.maxLength(monthMaxLength)]], 
     year: ["", [Validators.required, Validators.maxLength(yearMaxLength)]] 
    }); 

    this.form.get("day").valueChanges 
     .filter((value: string) => value.length === dayMaxLength) 
     .subscribe(() => this.monthElement.nativeElement.focus()); 

    this.form.get("month").valueChanges 
     .filter((value: string) => value.length === monthMaxLength) 
     .subscribe(() => this.yearElement.nativeElement.focus()); 
} 

基本的に曜日と月の両方のフォームコントロールの値の変更を購読し、値が最大長と等しい場合にのみ各ストリームをフィルタリングし、次の要素にフォーカスを設定します。おそらくこれらのことに気付く価値は、あまりにも登録を解除する必要があります。