Javascript焦点()在空的文本区域上不起作用
Javascript焦点()在空的文本区域上不起作用
提问于 2018-09-27 23:24:52
当下面的函数被调用时，我试图专注于一个文本区域。当文本区域被填充时，它会按预期工作，但当文本区域为空时，什么也不会发生。我也尝试过删除占位符，但这并没有什么不同。
有谁知道怎么解决这个问题吗？
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。空白且可编辑)。
回答 1
Stack Overflow用户
回答已采纳
发布于 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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52540368
复制相关文章
相似问题