在

Question

在HTML中：

<div id="b" *ngFor="let key of metadataKeys; let i = index">
    <span> {{key}} -></span>
    <span id="a" #metaValue contentEditable="" [innerHTML]="this.header.metaDataJson[key]"
        (keyup)="metaDataChange(metaValue, i)"></span> 
</div>

在ts文件中，我尝试设置光标位置：

metaDataChange(element, index) {
    this.header.metaDataJson[this.metadataKeys[index]] = element.innerHTML;
    let caretCurPos = element.innerHTML.length;
    let span = document.getElementById('a');
    let range = document.createRange();
    let node = document.getElementById("b"); 
    range.setStart(node.childNodes[0], 1); 
    range.setStart(span, 1); 
    let sel = window.getSelection();
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    span.focus(); 
}

当设置新值时，光标在此行的开头跳转。

this.header.metaDataJson[this.metadataKeys[index]] = element.innerHTML;

如何避免跳跃插入符号？是否可以使用contentEditable的替代方法？而且我不想要使用输入。