Question

我需要在从第一个文本框输入文本后移动下一个文本框。在第一个标签中键入文本到下一个标签后，它必须自动移动。

<div class="autotabbed-container">
  <div id="example1" class="autotabbed">
    <h3>Bank sort code: XX-XX-XX</h3>
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
  </div>
</div>

当我在第一个文本框中键入文本时，光标需要移动下一个文本框。请帮助如何在角度4中实现这一点。

如果我想申请ngFor，相同的代码无效。在下面的代码中，如果我想显示基于ngFor循环的文本框。在第一个td我将显示密码文本框，然后我将显示只有星号。在这种情况下，我们如何动态应用#input。我只需指向第一个td项而不是下一个td项。所以在这种情况下我们如何实现自动对焦。

<tr>
  <ng-container *ngFor="let i of dynamicArr, let x = index">
    <td *ngIf="i !== '*'">
      <input type="password" #input1 formControlName="dyna{{i}}" id="dyna{{i}}" (input) = "onInputEntry($event, input2)" required maxlength="1" />
    </td>
    <td *ngIf=" i === '*' ">
      <img class="flotado_right" id="starimage" src="starimage.jpg" class="dot-image">        
    </td>
  </ng-container>
</tr>

我正在构建如下的动态数组，动态文本的值为2 5和7.在这种情况下dynamicArr [2] = 1，dynamicArr [5] = 2，dynamicArr [7] = 3所以其他值的值为dynamicArr是*

for (let i = 0; i < 10; i++) {
  if (((i + 1) === this.dynamictext[0])) {
    this.dynamicArr[i] = '1';
  } else if (((i + 1) === this.dynamictext[1])) {
    this.dynamicArr[i] = '2';
  } else if (((i + 1) === this.dynamictext[2])) {
    this.dynamicArr[i] = '3';
  } else {
    this.dynamicArr[i] = '*';
  }
}

Answer 1

您可以使用(input)事件和模板引用变量（#var）来确定是否应该选择其他元素。

<input #input1 type="text" maxlength="2" size="2" (input)="onInputEntry($event, input2)" />
-
<input #input2 type="text" maxlength="2" size="2" />

---

// component 
onInputEntry(event, nextInput) {
  let input = event.target;
  let length = input.value.length;
  let maxLength = input.attributes.maxlength.value;

  if (length >= maxLength) {
    nextInput.focus();
  }
}

Answer 2

这可以这样做 HTML

<tr>
 <ng-container *ngFor="let i of dynamicArr, let x = index">
   <td *ngIf="i !== '*'">
     <input #tab type="password" id="tab{{i}}" required maxlength="1" class="tab" (input)="onInputEntry($event,'tab',(i))" />
   </td>
   <td *ngIf=" i === '*' " class="image">&</td>
 </ng-container>
</tr>

成分</ P>

onInputEntry(event, id, nextInputIndex) {
  let input = event.target;
  let nexInput = +nextInputIndex + 1;
  let newID = id + nexInput;
  document.getElementById(newID).focus();
}

Answer 3

通过ViewChild通过Renderer2获取元素并聚焦，如下所示：

HTML：

<input #input1 type="text" maxlength="2" size="2" (keydown.enter)="focusInput2()"/>
<input #input2 type="text" maxlength="2" size="2" />

打字稿：

export class MyComponent implements OnInit {

  constructor(private _renderer2: Renderer2)

  @ViewChild('input2') private input2: ElementRef;

  focusInput2(){
      this._renderer2.selectRootElement(this.input2["nativeElement"]).focus();
  }
}

别忘了导入：

import { ViewChild, ElementRef, Renderer2 } from '@angular/core';

当您在第一个输入上按Enter键时，它将聚焦第二个输入。这当然取决于您希望重点发生的差异。

Answer 4

如果您想重用代码，请尝试使用自定义指令。

指令：

import {Directive, HostListener, Input} from '@angular/core'

@Directive({
  selector: '[appAutoTab]'
})
export class AutoTabDirective {
  @Input('appAutoTab') appAutoTab

  @HostListener('input', ['$event.target']) onInput(input) {
    const length = input.value.length
    const maxLength = input.attributes.maxlength.value
    if (length >= maxLength) {
      this.appAutoTab.focus()
    }
  }
}

（记住要在app.module中导入指令）

@NgModule({
  declarations: [
   AutoTabDirective
  ]})

HTML

<input #input1 type="text" maxlength="2" [appAutoTab]="input2"/>
<input #input2 type="text" maxlength="2"/>

如何处理angular4

4 个答案: