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

您可以在这里循环<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">喜欢，{
1 {}}您可以将<div class="post" *ngFor="let post of posts; index as i">（此处为index）传递给从以下i获取相应的TextArea引用，

QueryList

在此处查看完整代码DEMO_2

Answer 2

您可以使用@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

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

Answer 3

如果使用模板变量，可以直接从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

点击设置焦点在textarea angular 5上

3 个答案: