单击时将焦点设置为 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>
...

演示

Answer 2

在这里你可以进行 for 循环<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获取相应的引用，TextAreaQueryList

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

完整代码请查看DEMO_2