JavaScript 'contenteditable' — Erste/ - Einstellung Cursor-Position

Kurze Antwort : Sie können nicht

Lange Antwort : Das problem, das Sie konfrontiert werden, dass Sie werde in der Lage sein, um (x,y) - Koordinaten für das click-Ereignis div1, aber eine Umsetzung der position der Einfügemarke, während erfordern Sie die Kenntnis der position der Einfügemarke in den Inhalt (das ist die Anzahl der Zeichen vor dem Cursor).

Konvertieren (x,y) - Koordinaten, um eine Zeichenposition, die Sie wirklich brauchen, zu wissen, wie viele Zeichen wurden vor (dh. Links auf der aktuellen Zeile und oben, wenn der text ltr).

Wenn Sie eine Feste Breite-schriftart, können Sie vereinfachen das problem : die Zuordnung eines (x,y) - Koordinate zu einem (Zeile, Spalte) - Koordinate auf eine Zeichentabelle.

Jedoch, Sie noch vor dem problem, nicht zu wissen, wie der text umgebrochen wird. Zum Beispiel :

------------------
|Lorem ipsum     |
|dolor sit amet  |
|consectetur     |
|adipiscing elit |
------------------

Klickt der Benutzer auf die d in dolor, wissen Sie, dass sich der Charakter der 1. auf die 2. Zeile, aber ohne Kenntnis der wrapping-Algorithmus gibt es keine Weise werden Sie wissen, dass es die 13 Zeichen in "Lorem ipsum dolor sit...". Und es gibt keine Garantie, dass so ein wrapping-Algorithmus ist identisch in allen Browsern und Plattform.

Nun, was ich Frage ist, warum würdest du mit 2 verschiedenen synchronisiert div in den ersten Platz ? Wäre es nicht einfacher mit nur einem div und setzen Sie dessen Inhalte bearbeitet werden, wenn der Benutzer klickt (oder schwebt) ?

können Sie, im Grunde müssen Sie die temporären Inhalte editierbar auf Ihre erste div zu fangen Cursor pos

$('div1').hover(function()
{ $(this).attr('contenteditable','true');
},function()
{ $(this).removeAttr('contenteditable');
}).mouseup(function()
{   var t = $(this);
    //get caret position and remove content editable
    var caret = t.getCaret();
    t.removeAttr('contenteditable');
    //do your div switch stuff
    ...
    //and apply saved caret position
    $('div2').setCaret(caret);
});

nun müssen nur get - /set-Cursor-Methode 🙂

edit > hier ist meine eigene, (live-demo)

        getSelection:function($e)
        {   if(undefined === window.getSelection) return false;
            var range = window.getSelection().getRangeAt(0);

            function getTreeOffset($root,$node)
            {   if($node.parents($root).length === 0) return false; //is node child of root ?
                var tree = [], treesize = 0;
                while(1)
                {   if($node.is($root)) break;
                    var index, $parent = $node.parent();
                    index = $parent.contents().index($node);
                    if(index !== -1) { tree[treesize++] = index; } $node = $parent;
                };  return tree.reverse();
            }

            var start = getTreeOffset($e,$(range.startContainer));
            var end   = getTreeOffset($e,$(range.endContainer));

            if(start & end === false) return false;

            return {start:start,end:end,startOffset:range.startOffset,endOffset:range.endOffset};
        }, setSelection:function($e,s,win)
        {   $e.focus(); if(s === false) return; var sel = win.getSelection(); sel.removeAllRanges();

            function getNode($e,s)
            {   var node = $e;
                for( var n=0;n<s.length;n++ )
                {   var index = s[n]; if(index < 0) break;
                    node = node.contents(':eq('+index+')');
                }   return node.get(0);
            }

            var start = getNode($e,s.start), end = getNode($e,s.end), range = win.document.createRange();
            range.setStart(start,s.startOffset); range.setEnd(end,s.endOffset); sel.addRange(range);
        }

Wenn Sie auf ein element, ein Selection-Objekt mit Länge null erstellt (bekommen Sie von element.getSelection() , where-element das div in Frage). Die focusOffset des Objekts wird Sie wissen lassen, dass Sie angeklickt haben, zum Beispiel die 74-Zeichen in das div (das ist die Sache, dass Adrien sagte, war unmöglich in einer anderen Antwort).