Wie könnte ich Caret-Position in einem editierbaren div speichern?

Question

Ich habe eine einfache Textarea gedreht, die zuvor die Caret-Position des Benutzers gespeichert und zurückgegeben hat, als sie meine Chrome-Erweiterung wieder geöffnet hat. Ich habe jetzt den Textbereich in ein editierbares Div geändert, um die Verwendung der grundlegenden Textformatierung zu ermöglichen, aber der Caret-Positionsspeicher funktioniert nicht.

Ich habe derzeit Arbeitscode, um die Caret-Position in einem Textbereich zu speichern, aber ich muss jetzt herausfinden, was ich ändern müsste, damit es in einem bearbeitbaren div stattdessen funktioniert.

(function($) { 
$.fn.caret = function(pos) { 
    var target = this[0]; 
    var isContentEditable = target.contentEditable === 'true'; 
    if (arguments.length == 0) { 
     if (window.getSelection) { 
      if (isContentEditable) { 
       target.focus(); 
       var range1 = window.getSelection().getRangeAt(0), 
        range2 = range1.cloneRange(); 
       range2.selectNodeContents(target); 
       range2.setEnd(range1.endContainer, range1.endOffset); 
       return range2.toString().length; 
      } 
      return target.selectionStart; 
     } 
     if (document.selection) { 
      target.focus(); 
      if (isContentEditable) { 
       var range1 = document.selection.createRange(), 
        range2 = document.body.createTextRange(); 
       range2.moveToElementText(target); 
       range2.setEndPoint('EndToEnd', range1); 
       return range2.text.length; 
      } 
      var pos = 0, 
       range = target.createTextRange(), 
       range2 = document.selection.createRange().duplicate(), 
       bookmark = range2.getBookmark(); 
      range.moveToBookmark(bookmark); 
      while (range.moveStart('character', -1) !== 0) pos++; 
      return pos; 
     } 
     return 0; 
    } 
    if (pos == -1) 
     pos = this[isContentEditable ? 'text' : 'val']().length; 
    if (window.getSelection) { 
     if (isContentEditable) { 
      target.focus(); 
      window.getSelection().collapse(target.firstChild, pos); 
     } else 
      target.setSelectionRange(pos, pos); 
    } else if (document.body.createTextRange) { 
     var range = document.body.createTextRange(); 
     range.moveToElementText(target); 
     range.moveStart('character', pos); 
     range.collapse(true); 
     range.select(); 
    } 
    if (!isContentEditable) 
     target.focus(); 
    return pos; 
} 
})(jQuery) 

Answer 1

Werfen Sie einen Blick auf diesem Schnipsel (Kredit this answer deren Geige Ich habe hier kopiert):

Dieser Code hört für die mouseup und keyup Ereignisse der Position des Cursors neu zu berechnen. Sie könnten es an diesen Punkten speichern.

function getCaretCharacterOffsetWithin(element) { 
 
    var caretOffset = 0; 
 
    var doc = element.ownerDocument || element.document; 
 
    var win = doc.defaultView || doc.parentWindow; 
 
    var sel; 
 
    if (typeof win.getSelection != "undefined") { 
 
    sel = win.getSelection(); 
 
    if (sel.rangeCount > 0) { 
 
     var range = win.getSelection().getRangeAt(0); 
 
     var preCaretRange = range.cloneRange(); 
 
     preCaretRange.selectNodeContents(element); 
 
     preCaretRange.setEnd(range.endContainer, range.endOffset); 
 
     caretOffset = preCaretRange.toString().length; 
 
    } 
 
    } else if ((sel = doc.selection) && sel.type != "Control") { 
 
    var textRange = sel.createRange(); 
 
    var preCaretTextRange = doc.body.createTextRange(); 
 
    preCaretTextRange.moveToElementText(element); 
 
    preCaretTextRange.setEndPoint("EndToEnd", textRange); 
 
    caretOffset = preCaretTextRange.text.length; 
 
    } 
 
    return caretOffset; 
 
} 
 

 
var lastCaretPos = 10; 
 

 
function showCaretPos() { 
 
    /* You could store the position when you call this function */ 
 
    var el = document.getElementById("test"); 
 
    lastCaretPos = getCaretCharacterOffsetWithin(el); 
 
    var caretPosEl = document.getElementById("caretPos"); 
 
    caretPosEl.innerHTML = "Caret position: " + lastCaretPos; 
 
} 
 

 
function restoreCaretPos() { 
 
    var node = document.getElementById("test"); 
 
    node.focus(); 
 
    var textNode = node.firstChild; 
 
    var range = document.createRange(); 
 
    range.setStart(textNode, lastCaretPos); 
 
    range.setEnd(textNode, lastCaretPos); 
 
    var sel = window.getSelection(); 
 
    sel.removeAllRanges(); 
 
    sel.addRange(range); 
 
} 
 

 
document.getElementById("test").onkeyup = showCaretPos; 
 
document.getElementById("test").onmouseup = showCaretPos; 
 
document.getElementById("button").onclick = restoreCaretPos;

<div id="test" contenteditable="true">This is an editable div</div> 
 
<div id="caretPos">Caret position: 10</div> 
 
<input type="button" id="button" value="restore caret" />