Javascript Focus（）不适用于空文本区域

当调用下面的函数时，我试图将注意力集中在文本区域。当textarea被填充时，它会按预期工作，但当textarea为空时，不会发生任何事情。我也尝试过删除占位符，但没有什么不同

有人知道如何解决这个问题吗

Javascript代码：

focusOnText(sampleId: string){
    var textarea = document.getElementById(sampleId);
    textarea.focus();

HTML代码：

<textarea class="x" id="sampleId"
          [disabled]="!this.data && !this.editable"
          [readOnly]="!this.editable"
          [(ngModel)]="data"
          placeholder="sample input">{{data}}</textarea>

{{data}

编辑：

我省略了edit按钮，它将editable设置为true并调用focusOnText函数。因此，当单击编辑按钮时，[disabled]为false（因为[disabled]为true的两个条件都不满足）。因此，我可以通过点击文本区域来聚焦，当数据为空时，它不会自动聚焦

---

我同时使用[readOnly]和[disabled]，这样我就可以在不同的场景中应用特定的样式（textarea是空白且不可编辑的，而不是空白且可编辑的）。

如果您稍微延迟调用

focus（）

，它应该会起作用。借助与

textarea

元素关联并作为参数传递给单击事件处理程序的模板引用变量

txt

，可以避免使用

getElementById（id）

：

<textarea #txt class="x"
          [disabled]="!data && !editable"
          [readOnly]="!editable"
          [(ngModel)]="data"
          placeholder="sample input"></textarea>

<button (click)="editable = true; focusOnText(txt)">Edit text</button>

如果需要，可以设置延迟。上面的示例没有指定任何延迟，但是调用是异步的

---

有关演示，请参阅。

禁用元素时，无法对焦该元素。尝试

[disabled]=“！editable”

或完全删除

disabled

属性，因为您还设置了

只读

。谢谢您的回答！然而，我认为我提供的信息太少了。我省略了edit按钮，它将editable设置为true并调用focusOnText函数。因此，当单击编辑按钮时，[disabled]为false（因为[disabled]为true的两个条件都不满足）。事实上，单击编辑后，我可以通过单击文本区域来聚焦文本区域。但是，它不会自动聚焦。我更新了我的答案以考虑您的评论。我只想补充一点，当禁用时，任何元素都不能聚焦（不是

textarea

-特定的东西）。

focusOnText(txt: HTMLTextAreaElement) {
  setTimeout(() => {
    txt.focus();
  });
}