私は3つのテキスト入力を関数でナビゲートするのに助けが必要

Question

3つのテキスト入力を使用して電話番号のカスタム入力を作成し、keyCodeを使用して、ユーザーがデータを入力または削除するときに前後にカーソルを移動させます。あなたはそれが必要に応じて、自動的に次のフィールドにジャンプしますが、削除するときに戻って前のフィールドにジャンプしないタイプのようHere's a plunker to what I have.

これは、これまで

fieldJumper(event){ 
    let a = this.first; 
    let b = this.second; 
    let c = this.third; 

    if(a.nativeElement.focus){ 
     if(this.NumA.length >2){ 
     if(event.keyCode !== 127 || event.keyCode !== 8 || event.keyCode !== 37){ 
      b.nativeElement.focus(); 
     } 
     } 
    } 
    if(b.nativeElement.focus){ 
     if(this.NumB.length == 'null'){ 
     if(event.keyCode === 127 || event.keyCode === 8 || event.keyCode === 37){ 
      a.nativeElement.focus(); 
     } 
     } 
     else if(this.NumB.length > 2){ 
     if(event.keyCode !== 127 || event.keyCode !== 8 || event.keyCode !== 37){ 
      c.nativeElement.focus(); 
     } 
     } 
    } 
    if(c.nativeElement.focus){ 
     if(this.NumC.length == 'null'){ 
     if(event.keyCode === 127 || event.keyCode === 8 || event.keyCode === 37){ 
      b.nativeElement.focus(); 
     } 
     } 
    } 

} 

私の関数です。私は=の金額を前後に使いこなしました。私はもともとthis.NumA == 'null'ではなく、this.NumA.length < 1だった。 plunkerで

あなたはこれがあれば、ユーザーが手動で選択する必要はありませんので、全くこれまでのエントリに基づいて選択することが適切なテキストフィールドを強制的に

selection(){ 
    let a = this.first; 
    let b = this.second; 
    let c = this.third; 

    if(this.NumA.length < 1 && this.NumB.length < 1 && this.NumC.length < 1 && !event.keyCode) 

    { a.nativeElement.focus(); } 

    if(this.NumA.length > 2 && this.NumB.length < 1 && this.NumC.length < 1 && !event.keyCode) 

    { b.nativeElement.focus(); } 

    if(this.NumA.length > 2 && this.NumB.length > 2 && this.NumC.length < 1 && !event.keyCode) 

    {c.nativeElement.focus();} 

} 

にもこの機能が表示されますピンクの指を持つフィールド。私は、関数が互いに現時点で衝突するので、コメントアウトしています。だから私はまた、彼らが互いに戦うのを防ぐ方法を考えようとしています。バックスペースがなぜトリガしないのか、そしてこれら2つの機能をどのようにしてクラッシュさせないのかは誰にも分かりますか？

UPDATE

テンプレートに(keydown)に切り替えると、それは削除が押されたとき、今第三から第二の入力にジャンプするが、それでも最初にジャンプしないkeycodeタイプミスを修正。

私は違いだけではなく、私がための条件を追加しようとした

if(this.NumB.length < 1){...} 

//and 

if(this.NumC.length < 1){...} 

を有するのである。この

fieldJumper(event){ 
    let a = this.first; 
    let b = this.second; 
    let c = this.third; 

    if(a.nativeElement.focus){ 
     if(this.NumA.length >2){ 
     if(event.keyCode !== 127 || event.keyCode !== 8 || event.keyCode !== 37){ 
      b.nativeElement.focus(); 
     } 
     } 
    } 
    if(b.nativeElement.focus){ 
     if(this.NumB.length < 1 && this.NumA.length > 2){ 
     if(event.keyCode === 127 || event.keyCode === 8 || event.keyCode === 37){ 
      a.nativeElement.focus(); 
     } 
     } 
     else if(this.NumB.length > 2){ 
     if(event.keyCode !== 127 || event.keyCode !== 8 || event.keyCode !== 37){ 
      c.nativeElement.focus(); 
     } 
     } 
    } 
    if(c.nativeElement.focus){ 
     if(this.NumC.length < 1 && this.NumB.length > 2){ 
     if(event.keyCode === 127 || event.keyCode === 8 || event.keyCode === 37){ 
      b.nativeElement.focus(); 
     } 
     } 
    } 
} 

に私の機能を変更することによって、それが動作するようになったUPDATE 02

入力の状態はこのように切り替わります

if(this.NumB.length < 1 && this.NumA.length > 2){...} 

//and 
if(this.NumC.length < 1 && this.NumB.length > 2){...} 

今や始めから終わりまで行きます。ここで問題になっているのは、他の関数のコメントを外して、fieldJumper()関数を使わずに空のフィールドをクリックすると、最初の入力を強制的に選択することはありません。

更新03

私のタブレットがselection()関数内の変数に.comを追加判明。今は動作しますが、カーソルが後ろに飛ぶのを防ぎます。

Answer 1

は、keyUpイベントにあなたのイベントを変更

タッチスクリーンのためにそれは をキー入力することができ、あなたは基本的なものは、アクションが完了した後は、値の状態を確認すべきであるということである

fieldJumper(e){ 
    let cur = e.target.maxLength, 
     val = e.target.value.length; 
    if (cur == val) { 
     if (e.target == this.first.nativeElement) this.second.nativeElement.focus(); 
     if (e.target == this.second.nativeElement) this.third.nativeElement.focus(); 
    } 
    if (!val) { 
     if (e.target == this.third.nativeElement) this.second.nativeElement.focus(); 
     if (e.target == this.second.nativeElement) this.first.nativeElement.focus(); 
    } 
    } 

https://plnkr.co/edit/DJGnbBMzgMEzfIDeZ32v?p=preview

機能更新します。

イベントオブジェクトには、常にイベントが発生した要素を含む「target」プロパティがあります。「if（a.nativeElement.focus）」の代わりに使用できます。常に空の関数であるため、常にtrueです。

あなたの "maxLength"属性に依存し、それを現在の値の長さと比較する最後の点です。

機能の問題を「選択」については、それは本当に風変わりですが、解決策の例は、ここで https://plnkr.co/edit/VOAU2nJjC44fBZ4M0CuF?p=preview

ポイントが低い場合は、入力を変更禁止する、「fieldJumper」から、ユーザーの入力から自動フォーカスを分離することです1つは選択されていないので、次のようになります。

private _autofocus = false; 
selection(e){ 
    let a = this.first.nativeElement, 
     b = this.second.nativeElement, 
     c = this.third.nativeElement, 
     cur = e.target; 
    if (!this._autofocus && a.maxLength > a.value.length) 
    return a.focus(); 

    if (!this._autofocus && b.value && (b.maxLength > b.value.length) 
    return b.focus(); 

    if (this._autofocus) this._autofocus = false; 
    } 

    fieldJumper(e){ 
    let cur = e.target.maxLength, 
     val = e.target.value.length; 

    if (cur == val) { 
     if (e.target == this.first.nativeElement){ 
     this._autofocus = true; 
     this.second.nativeElement.focus(); 
     } 
     if (e.target == this.second.nativeElement){ 
     this._autofocus = true; 
     this.third.nativeElement.focus(); 
     } 
    } 
    if (!val) { 
     if (e.target == this.third.nativeElement){ 
     this._autofocus = true; 
     this.second.nativeElement.focus(); 
     } 
     if (e.target == this.second.nativeElement){ 
     this._autofocus = true; 
     this.first.nativeElement.focus(); 
     } 
    } 
    } 

これは少し正直ですが、あなたはそれを改良することができますように願っています。