Javascript html输入标记中的自动聚焦只工作一次。有没有办法用另一种方式自动聚焦输入框？

我正在开发一个浏览器内编辑器，它需要快速编辑单个单词。我试图通过将特定的单词替换为包含这些单词的输入框来实现它，然后允许用户当场编辑该单词

因为我希望过程快速，所以我希望确保输入字段在切换后立即聚焦，并且我当前的解决方案是在输入标记中使用“autofocus”关键字

这对加载页面后的第一次编辑很有效，但对后续编辑无效

演示视频：

我也尝试过使用DOM操作来实现这一点，但由于某些原因，它无法找到带有标记的元素，我觉得这是因为它是动态生成的

相关源代码： HTML模板

---

此外，是否有一种方法可以在输入框最初聚焦时突出显示所有字符？这样，用户可以立即开始键入以替换整个框

再次对焦之前，请使用

document.activeElement.blur（）

。

这里角度更大的方法是使用ViewChild：

@ViewChild('myInput', {static: false})
myInput;

private focusWord = function() {
    this.myInput.nativeElement.select(); // select focuses the input and selects text
}

这可能会出现一些使用NGIF需要超时和不需要的时间问题，所以您可以考虑使用类来隐藏它：

<input [class.hidden]="(currentIndex === i) && (currentSentence === s_i) && (editing)"
      id="editingWord"
      (click)="onClick(s_i, i)"
      type="text"
      [(ngModel)]="sentences[s_i][i]">

您可以根据需要声明/导入它，这样使用就很简单了：

<input [class.hidden]="(currentIndex === i) && (currentSentence === s_i) && (editing)"
      id="editingWord"
      (click)="onClick(s_i, i)"
      type="text"
      [(ngModel)]="sentences[s_i][i]"
      autoSelect>

<input [class.hidden]="(currentIndex === i) && (currentSentence === s_i) && (editing)"
      id="editingWord"
      (click)="onClick(s_i, i)"
      type="text"
      [(ngModel)]="sentences[s_i][i]">

import { AfterContentInit, Directive, ElementRef, Input } from '@angular/core';

@Directive({
    selector: '[autoSelect]'
})
export class AutoSelectDirective implements AfterContentInit {

    public constructor(private el: ElementRef) { } // inject the element ref

    public ngAfterContentInit() { // run at the latest hook
        setTimeout(() => {
            this.el.nativeElement.select(); // run select after a timeout
        }, 500);
    }
}

<input [class.hidden]="(currentIndex === i) && (currentSentence === s_i) && (editing)"
      id="editingWord"
      (click)="onClick(s_i, i)"
      type="text"
      [(ngModel)]="sentences[s_i][i]"
      autoSelect>