Griff Caretposition in editierbare Inhalt div

Question

ich diesen Inhalt editierbare div in HTML haben

<div contenteditable="true" id="TextOnlyPage"></div> 

Und heres meine jQuery-Code

var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm"); 
$('#TextOnlyPage').keyup(function(e){ 
    if(e.keyCode == 13){ 
     e.preventDefault(); 
     $('#TextOnlyPage').children().each(function() { 
      if ($(this).is("div")) { 
       $(this).contents().unwrap(); 
      }}); 
     $('#TextOnlyPage').append("<br/>"); 
    } 
     $('#TextOnlyPage').children().contents().unwrap(); 
     var $this = $(this); 
     var content = $this.html(); 
     $this.html(content.replace(rxp, "<span class='highlight'>$1</span>"));}); 

Problem ist die Position der Einfügemarke, denn wenn es span-Tags anwenden um Zahlen in string.replace-Methode, dann Cursor geht an den Anfang des Inhalts editierbare div. Es kann auch nicht zur nächsten Zeile gehen, während ich die Eingabetaste drücke.

Ich weiß, dass ich es durch range und selection Objekte behandeln kann, kann aber keine nützliche Ressource finden, um zu verstehen, wie diese Objekte funktionieren.

Bitte geben Sie mir entweder Lösung für dieses Problem und es wird besser, wenn die Lösung in angularjs, oder bieten Sie mir eine Ressource, wo ich Bereich und Auswahl Objekte mit Arbeitsbeispielen verstehen kann.

Answer 1

Hier sind einige Ressourcen von MDN: Selection und Range.

Ich habe diese JSFiddle to demonstrate re-positioning the caret erstellt.

Es funktioniert nicht in allen Fällen (z. B. auf Enter, Auswahl eines Bereichs mit Shift + Pfeil ...), aber es sollte Ihnen bereits einige Ideen geben.

Hier ist ein Beispiel von MDN über Auswahlen erstellen:

/* Select all STRONG elements in an HTML document */ 

var strongs = document.getElementsByTagName("strong"); 
var s = window.getSelection(); 

if(s.rangeCount > 0) s.removeAllRanges(); 

for(var i = 0; i < strongs.length; i++) { 
    var range = document.createRange(); 
    range.selectNode(strongs[i]); 
    s.addRange(range); 
} 

Als Bemerkung am Rande, mit contentEditable arbeitet, wird mehr Probleme in der Zukunft bringen, schlage ich tun, um Ihre besten Alternativen, um es zu finden. Achten Sie außerdem darauf, dass die eingeschränkten Browser-Support-Warnungen in den von mir bereitgestellten Links angezeigt werden.

Answer 2

stand ich das gleiche Problem wie du vor einer Weile tat, undertand wie range und selection Arbeiten empfehle ich Ihnen Selection und Range einen Blick auf MDN docs zu nehmen

Eine zuverlässige Art und Weise ändern in einem contentEditable div des Erfassens ist das Ereignis input. Ein Problem, das ich beim Anhören von keyUp und das Verhindern des Standardverhaltens für bestimmte keyCode festgestellt habe, ist, dass sie Tonnen von ihnen sind, und es sehr schwer ist, alle Anwendungsfälle abzudecken.

Was ich am liebsten mache, ist, das normale Ereignis verarbeitet zu bekommen, die Caret-Position zu speichern, den Textwert zu erhalten und die Teile, die markiert werden sollen, zu ersetzen und dann die Caret-Position zurückzusetzen.

Hier ist ein einfaches Beispiel

var contentEditable = document.querySelector('div[contenteditable]'); 
contentEditable.addEventListener('input', onInput); 

var onInput = function(e) { 

    // this function will be called after the current call-stack 
    // is finished, at that time the user input will be inserted 
    // in the content editable 
    setTimeout(function() { 

     // save the caret position 

     var text = contentEditable.innerText; 
     // perform all your replacement on `text` 
     contentEditable.innerHTML = text; 

     // set the caret position back 
    }, 0); 
} 

ich auch zwei praktische Methode getCaretOffsetWithin und setCaretPositionWithin schrieb, um die caret zu manipulieren, wenn Sie einige DOM-Manipulation durchführen möchten und neu zu positionieren den Cursor auf seinem Anfangswert nach dem wird bearbeitet.

Sie können sie auf diesem Kern prüfen contenteditable-utils.js