Question

我正在构建一个组件，作为接听电话号码的输入you can see here.

我使用3个文本输入来获取电话号码的每个部分，并希望使用一个功能来控制根据if条件选择哪个。例如，假设用户点击技术上的第3个输入来输入他们的号码。我希望它能自动将焦点设置为第一个输入，以便它们可以在正确的位置开始。

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

模板

<fieldset>
  <p class="input-container">
    (
    <input id="first" class="phnA" type="text"
      maxlength="3"
      pattern="^[0-9]{3}"
      placeholder ="123"
      [(ngModel)]="NumA"
      onselect="selection()"
    >
    )
    <input id="second" class="phnA" type="text"
      maxlength="3"
      pattern="^[0-9]{3}"
      placeholder ="456"
      [(ngModel)]="NumB"
      onselect="selection()"
    >
    -
    <input id="third" class="phnB" type="text"
      maxlength="4"
      pattern="^[0-9]{3}"
      placeholder ="7890"
      [(ngModel)]="NumC"
      onselect="selection()"
    >
  </p>
</fieldset>

组件类中的函数

selection(){
    let a = document.getElementById('first');
    let b = document.getElementById('second');
    let c = document.getElementById('third');

    if( this.NumA.length > 3 ){
      document.getElementById("first").focus();
    }

    /*if(this.NumA.length < 3){
      a.focus();
    }else if(this.NumA.length = 3 && this.NumB.length < 3){
      b.focus();
    }else if(this.NumA.length = 3 && this.NumB.length = 3){
      c.focus();
    }*/
  }

我的第一次尝试就是被评论出来的大块。我尝试直接应用它，看看是否可能因为变量而丢失了某些东西，但它仍然没有强制将光标放入第一个输入。我使用强制数字的正则表达式也不起作用。 NumA, NumB, NumC变量都设置为string，因为maxlength由于某种原因不能处理type="number输入，这是一个不同的问题，为了这个问题而提到解释为什么他们不属于number类型。我在这里做错了什么？

Answer 1

我建议使用“角度方式” 首先删除document.getelementbyID（）; 代替。在输入中添加标签： #first #second #third并修改您的观点。注意事件触发器，我们将其更改为（焦点）以触发选择功能。

<fieldset>
  <p class="input-container">
    <input #first class="phnA" type="text"
       maxlength="3"
       pattern="^[0-9]{3}"
       placeholder ="123"
       (focus)="selection(1)">
    <input #second class="phnA" type="text"
       maxlength="3"
       pattern="^[0-9]{3}"
       placeholder ="456"
       (focus)="selection(2)">
    <input #third class="phnB" type="text"
       maxlength="4"
       pattern="^[0-9]{3}"
       placeholder ="7890"
       (focus)="selection(3)">

更新你的组件并添加@ViewChild（） - 这是一种与角度中的原生DOM元素进行交互的方法。

import { Component, ViewChild, ElementRef } from '@angular/core';
export class AppComponent {
  @ViewChild('first') first: ElementRef;
  @ViewChild('second') second: ElementRef;
  @ViewChild('third') third: ElementRef;


  constructor(){
  }
  selection(inputNumber){

    if(inputNumber == 2) {
      if(this.first.nativeElement.value === "") {
        this.first.nativeElement.focus();
        return;
      }
    }
    if(inputNumber == 3) {
      if(this.first.nativeElement.value === "") {
        this.first.nativeElement.focus();
        return;
      }
      if(this.second.nativeElement.value === "") {
        this.second.nativeElement.focus();
        return;
      }
    }
  }
}

希望这有所帮助，有关如何找到@ViewChild（）的更多信息here.

Answer 2

通过使用Andresson的部分回答，我想出了一个解决方案。我使用的部分是

查看子实施
（重点）实现HTML元素

从那里我创建了这个函数

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();}

}

如何通过onselect功能强制选择文本输入？

2 个答案: