contenteditable, setzen Sie Caret am Ende des Textes (cross-browser)

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, in FF es würde in etwa so Aussehen:

hey
<br />
what's up?

und in IE:

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

leider, es gibt keine nette Art, es so zu machen, dass jeder browser fügt einen <br /> statt einem div - oder p-tag, oder zumindest konnte ich nicht finden, alles, was online.

JEDENFALLS, was ich versuche zu tun, ist jetzt, wenn ich drücken Sie die Tasteich will den Cursor auf das Ende des Textes, so sollte es in etwa so Aussehen:

hey
what's up?|

irgendeiner Weise, dies zu tun, so funktioniert es in alle browser?

Beispiel:

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

        ele.focus();

        //set caret -> end pos
     }
 }

InformationsquelleAutor der Frage | 2010-11-20

  1. 228

    Folgende Funktion tun es in allen wichtigen 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.getElementById("content") );

    Platzieren Sie die Einfügemarke am Anfang ist nahezu identisch: es erfordert nur das ändern des booleschen ging in die Anrufe zu collapse(). Hier ist ein Beispiel, das erzeugt den Funktionen zum platzieren Sie die Einfügemarke am Anfang und am Ende:

    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);

    InformationsquelleAutor der Antwort Tim Down

  2. 2

    Leider Tim ausgezeichnete Antwort hat bei mir nur für die Platzierung am Ende für die Platzierung am Anfang hatte ich diese etwas zu 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();
}

    Nicht sicher, aber wenn focus() und select() tatsächlich benötigt werden.

    InformationsquelleAutor der Antwort dimid

  3. -2

    Wenn Sie mit dem google closure compiler, können Sie die folgenden (etwas vereinfacht aus Tim ' s Antwort):

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

    Hier ist die gleiche Sache in ClojureScript:

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

    Habe ich getestet in Chrome, Safari und FireFox, nicht sicher über IE...

    InformationsquelleAutor der Antwort Matt W-D

Schreibe einen Kommentar