Question

我有一个自动更新的输入字段，我想立即触发焦点事件。我怎样才能做到这一点？

<div class="form-group">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <input type="text" class="form-control" name="point" [(ngModel)]="point" placeholder="point" />
    </div>
</div>
<div class="form-group">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <textarea class="form-control" name="description" rows="1" placeholder="Point Explaination"></textarea>
    </div>
</div>

点击Google地图中的某个点时，点点输入会更新。我需要立即关注下一个输入（描述）以插入描述。

Answer 1

感谢Hrishikesh，我还有一种更简单的方法来代替注入ElementRef：

在输入中添加了标记#description：

<textarea class="form-control" name="description" #description rows="1" placeholder="Point Explaination"></textarea>

在组件中声明了一个变量：

@ViewChild('description') description;

最后 必要时 ：

this.description.nativeElement.focus();

Answer 2

因此，如果您先输入空白或不输入

，请先检查

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <input type="text" class="form-control" name="point" [(ngModel)]="point" (ngModelChange)="textAreaEmpty()" placeholder="point" />
    </div>

在ts档案中

point: string = '';

textAreaEmpty(){
  if (this.point != '') {
    console.log(this.point);
  }
}

在其他输入中设置变量，如

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <textarea  #myInput class="form-control" name="description" rows="1" placeholder="Point Explaination"></textarea>
    </div>

和ts文件

@ViewChild("myInput") inputEl: ElementRef;

  focusInput() {
    this.inputEl.nativeElement.focus()
  }

并在检查空值或不空值时调用此函数。

textAreaEmpty(){
      if (this.point != '') {
        console.log(this.point);
this.focusInput();
      }
    }

如何在角度5中触发特定元素上的焦点事件

2 个答案: