当下面的函数被调用时,我试图专注于一个文本区域。当文本区域被填充时,它会按预期工作,但当文本区域为空时,什么也不会发生。我也尝试过删除占位符,但这并没有什么不同。
有谁知道怎么解决这个问题吗?
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为false (因为不满足disabled为true的两个条件)。因此,我可以通过在文本区域中实际单击来聚焦,只是当数据为空时它不会自动聚焦。
我同时使用了readOnly和disabled,这样我就可以在不同的场景中应用特定的样式(文本区域是空白的和不可编辑的VS。空白且可编辑)。
发布于 2018-09-27 23:58:34
如果您稍微延迟对focus()
的调用,它应该可以工作。您可以借助模板引用变量txt
来避免使用getElementById(id)
,该变量与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。
https://stackoverflow.com/questions/52540368
复制相似问题