Question

我有一个div元素，contenteditable属性设置为true div具有与角度类属性的双向绑定。

问题是当文本通过(input)事件发生变化时在尝试编辑div内的文本时，光标失去焦点并且用户的用户体验不佳。

基本上我想尝试这样的东西（js）：

divlft.focus();
divlft.selectionEnd = end;

但如果我尝试将div转换为HTMLInputElement，我会获得undefined值：

let txtlft = document.getElementById("divlft") as HTMLInputElement;
console.log(txtlft.selectionEnd); // delete

如果我尝试将元素转换为HTMLElement，显然我无法访问 selectionEnd属性

HTML

   <div class="txtAr txtleft" id="divlft"  contenteditable="true" [innerHTML]="LeftText | sanitizeHtml" (input)="textChanged($event.target.innerHTML)">


    </div>

输入脚本textChange方法：

public textChanged(value: string): void {
    let txtlft = document.getElementById("divlft") as HTMLInputElement;
    console.log(txtlft.selectionEnd); // delete
    this.LeftText = value;
    this.LeftText = "<span style='color: white;'>" + this.LeftText + "</span>";
    txtlft.focus();
    console.log(txtlft.selectionEnd)
}

我对前端Web开发很新，所以也许我遗漏了一些基本但我没有成功搜索解决方案。

我如何解决这个问题？

强制转换contenteditable div以访问selectionEnd属性

0 个答案: