Question

当我调用下面的函数时，我试图集中在文本区域上。填充文本区域时，它可以按预期工作，但是当文本区域为空时，则什么也没有发生。我也尝试过删除占位符，但这没什么区别。

有人知道如何解决此问题吗？

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>

编辑：

我省略了编辑按钮，该按钮将editable设置为true并调用focusOnText函数。因此，当单击编辑按钮时，[disabled]为假（因为没有同时满足[disabled]为true的两个条件）。因此，我可以通过实际单击文本区域来进行聚焦，但是当数据为空时，它不会自动聚焦。

我同时使用[readOnly]和[disabled]，以便可以在不同的情况下应用特定的样式（textarea为空白，不可编辑，VS为空白和可编辑）。

Answer 1

如果您稍微延迟对focus()的呼叫，它应该可以工作。您可以避免在与getElementById(id)元素关联并作为参数传递给click事件处理程序的模板引用变量txt的帮助下使用textarea：

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

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

在代码中，使用setTimeout()将呼叫延迟到focus()。

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

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

有关演示，请参见this stackblitz。

Javascript Focus（）在空白的文本区域上不起作用

1 个答案: