单击时将焦点设置在 textarea angular 5

Question

<div class="posts">    
   <div class="post">
      <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>

    <div class="post">
       <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>
</div>
...

我想在“a”点击时将焦点设置在 textarea 上。谁能帮帮我吗。我正在使用角度 5

Answer 1

如果您使用模板变量，您可以直接从 HTML 文件中的标记设置焦点。您可以在(click) 方法中引用它。这样，就不需要通过代码访问 DOM，它保留在 HTML 文件中，更便于调试：

HTML

...
<textarea #textarea1 [(ngModel)]="text" class="comment-text" name="text"></textarea>
<button (click)="textarea1.focus()">SetFocus on the first textarea</button>
...
<textarea #textarea2 [(ngModel)]="text" class="comment-text" name="text"></textarea>
<button (click)="textarea2.focus()">SetFocus on the second textarea</button>
...

DEMO

Answer 2

你可以在这里循环<div class="post">，

<div class="posts">    
  <div class="post">
    <div>post content</div>
    // Pass index here, if you want to achieve dynamically
    <a class="comment" (click)="doSomething(0)">Comment</a>
    <textarea [(ngModel)]= "model.text" class="comment-text" #txtArea name="text"> 
    </textarea>
  </div>   
  <div class="post">
    <div>post content</div>
    <a class="comment" (click)="doSomething(1)">Comment</a>
    <textarea [(ngModel)]= "model.text" class="comment-text" #txtArea name="text"> 
    </textarea>
  </div>
</div>

现在在您的 ts 文件中添加以下导入，

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

像这样使用ViewChildren和QueryList读取元素，

@ViewChildren("txtArea") textAreas:QueryList<ElementRef>;

最后像这样的doSomething 事件处理程序，

doSomething(index: number) {
  this.textAreas.find((item, idx) => {
    return idx === index;
  }).nativeElement.focus();
}

更新

上面的代码将使用posts 的数组。所以我们不需要像#txtArea1、#txtArea2 等那样对id 进行硬编码。 请在此处查看DEMO_1

如果您正在迭代 <div class="post"> 之类的，

<div class="post" *ngFor="let post of posts; index as i">

您可以通过 index（此处为 i）从 QueryList 获取相应的 TextArea 引用，如下所示,

<a class="comment" (click)="textAreas.toArray()[i].nativeElement.focus()">Comment</a>

在这里查看完整代码DEMO_2

Answer 3

您可以使用@ViewChild 装饰器。文档：https://angular.io/api/core/ViewChild.

您需要为输入元素指定一个名称并连接一个点击事件。

<textarea #inputToFocus />
 <a (click)="focusInput()">Click</button>

在您的组件中，使用@ViewChild 搜索元素，然后实现点击处理程序来执行您需要的操作。

export class App implements AfterViewInit {
  @ViewChild("inputToFocus") inputElement: ElementRef;

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

注意：inputElement 变量将在ngAfterViewInit 事件触发时首先可用。

由于更新的问题而更新：要处理多个元素，您需要使用 @ViewChildren 文档： https://angular.io/api/core/ViewChildren

在您上面给出的代码示例中，我会将冗余代码放入自己的组件中以封装重复的功能。