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.length < 1而不是this.NumA == 'null'。

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

}

这会强制根据条目选择正确的文本字段（如果有的话），这样用户就不必手动选择带有小拇指的字段。我已经注释掉了，因为这些功能此刻相互碰撞，所以我也试着想办法让他们不要互相打架。任何人都知道为什么退格不会触发以及如何防止这两个函数发生冲突？

更新

切换到模板中的(keydown)并修复keycode拼写错误，当推送删除时，它现在从第3个输入跳转到第2个输入，但仍然没有跳转到第一个。

更新02

我通过将我的功能修改为

来实现它

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

差异不仅仅是

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

//and

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

我尝试为它切换到的输入状态添加条件

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

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

它现在从头到尾来回走动。现在唯一的问题是我取消注释了另一个函数，现在当你在没有fieldJumper()函数的情况下点击空字段时，它不会强制选择第一个输入。

更新03

我的平板电脑将.com添加到selection()功能中的变量中。它现在有效，但它可以防止光标向后跳。

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”和用户输入分开，如果未选择较低的输入，则禁止更改输入，因此它可能如下所示：

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

这有点直接，但我希望你能够改进它。

我需要帮助在3个文本输入之间导航并使用函数

1 个答案: