inhaltsbearbeitbar, Caret am Ende des Textes setzen (browserübergreifend)

Ausgabe in Chrome :

<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
    hey
    <div>what's up?</div>
<div>
<button id="insert_caret"></button>

Ich glaube an FF würde es ungefähr so ​​aussehen:

hey
<br />
what's up?

und im IE :

hey
<p>what's up?</p>

Leider gibt es keine gute Möglichkeit, es so zu machen, dass jeder Browser ein <br />anstelle eines div- oder p-Tags einfügt, oder zumindest konnte ich online nichts finden.

Jedenfalls versuche ich jetzt, wenn ich auf den Knopf drücke, dass das Caret am Ende des Textes gesetzt wird, also sollte es ungefähr so ​​aussehen:

hey
what's up?|

Wie funktioniert das, damit es in allen Browsern funktioniert ?

Beispiel:

$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -> end pos
     }
 }

Die folgende Funktion funktioniert in allen gängigen Browsern:

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

placeCaretAtEnd( document.querySelector('p') );

p{ padding:.5em; border:1px solid black; }

<p contentEditable>foo bar </p>

Das Platzieren des Carets am Anfang ist nahezu identisch: Es muss lediglich der Boolesche Wert geändert werden, der an die Aufrufe von übergeben wird collapse(). Hier ist ein Beispiel, das Funktionen zum Platzieren des Carets am Anfang und am Ende erstellt:

function createCaretPlacer(atStart) {
    return function(el) {
        el.focus();
        if (typeof window.getSelection != "undefined"
                && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(atStart);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(atStart);
            textRange.select();
        }
    };
}

var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);

Leider hat Tims ausgezeichnete Antwort für mich nur für die Platzierung am Ende funktioniert, für die Platzierung am Anfang musste ich sie leicht modifizieren.

function setCaret(target, isStart) {
  const range = document.createRange();
  const sel = window.getSelection();
  if (isStart){
    const newText = document.createTextNode('');
    target.appendChild(newText);
    range.setStart(target.childNodes[0], 0);
  }
  else {
    range.selectNodeContents(target);
  }
  range.collapse(isStart);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  target.select();
}

Ich bin mir jedoch nicht sicher, ob focus()und select()tatsächlich benötigt werden.

Dieses (Live-) Beispiel zeigt eine kurze einfache Funktion setCaretAtStartEnd, die zwei Argumente akzeptiert. Ein (bearbeitbarer) Knoten zum Platzieren des Carets bei & ein Boolescher Wert, der angibt, wo das Caret platziert werden soll (Anfang oder Ende des Knotens)

const editableElm = document.querySelector('[contenteditable]');

document.querySelectorAll('button').forEach((elm, idx) => 
  elm.addEventListener('click', () => {
    editableElm.focus()
    setCaretAtStartEnd(editableElm, idx) 
  })
)

function setCaretAtStartEnd( node, atEnd ){
  const sel = document.getSelection();
  node = node.firstChild;

  if( sel.rangeCount ){
      ['Start', 'End'].forEach(pos =>
        sel.getRangeAt(0)["set" + pos](node, atEnd ? node.length : 0)
      )
  }
}

[contenteditable]{ padding:5px; border:1px solid; }

<h1 contenteditable>Place the caret anywhere</h1>
<br>
<button>Move caret to start</button>
<button>Move caret to end</button>

Wenn Sie den Google Closure Compiler verwenden, können Sie Folgendes tun (etwas vereinfacht aus Tims Antwort):

function placeCaretAtEnd(el) {
    el.focus();
    range = goog.dom.Range.createFromNodeContents(el);
    range.collapse(false);
    range.select();
}

In ClojureScript ist dasselbe:

(defn place-caret-at-end [el] 
   (.focus el)
   (doto (.createFromNodeContents goog.dom.Range el)
         (.collapse false)
         .select))

Ich habe dies in Chrome, Safari und FireFox getestet und bin mir über den Internet Explorer nicht sicher ...