contentititableにキャレットの位置を維持する

Question

私はhtml属性contenteditableを使用していますが、私のコンポーネントのinnerHTMLの値を置き換えると、カーソル（キャレット）はそれを位置0に戻します。カーソル位置を保持する方法はありますか？

ITSはそのようになります。

Answer 1

私は別のトピックで解決本当のが見つかりました： How to set caret(cursor) position in contenteditable element (div)?

ここではコードです：

function createRange(node, chars, range) { 
    if (!range) { 
     range = document.createRange() 
     range.selectNode(node); 
     range.setStart(node, 0); 
    } 

    if (chars.count === 0) { 
     range.setEnd(node, chars.count); 
    } else if (node && chars.count >0) { 
     if (node.nodeType === Node.TEXT_NODE) { 
      if (node.textContent.length < chars.count) { 
       chars.count -= node.textContent.length; 
      } else { 
       range.setEnd(node, chars.count); 
       chars.count = 0; 
      } 
     } else { 
      for (var lp = 0; lp < node.childNodes.length; lp++) { 
       range = createRange(node.childNodes[lp], chars, range); 

       if (chars.count === 0) { 
        break; 
       } 
      } 
     } 
    } 

    return range; 
}; 

function setCurrentCursorPosition(element,chars) { 
    if (chars >= 0) { 
     var selection = window.getSelection(); 

     range = createRange(element.parentNode, { count: chars }); 

     if (range) { 
      range.collapse(false); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
     } 
    } 
}; 

function isChildOf(node, parentId) { 
    while (node !== null) { 
     if (node.id === parentId) { 
      return true; 
     } 
     node = node.parentNode; 
    } 

    return false; 
}; 

function getCurrentCursorPosition(parentId) { 
    var selection = window.getSelection(), 
     charCount = -1, 
     node; 

    if (selection.focusNode) { 
     if (isChildOf(selection.focusNode, parentId)) { 
      node = selection.focusNode; 
      charCount = selection.focusOffset; 

      while (node) { 
       if (node.id === parentId) { 
        break; 
       } 

       if (node.previousSibling) { 
        node = node.previousSibling; 
        charCount += node.textContent.length; 
       } else { 
        node = node.parentNode; 
        if (node === null) { 
         break; 
        } 
       } 
      } 
     } 
    } 

    return charCount; 
};