Programmgesteuert Text in einem inhaltsbearbeitbaren HTML-Element auswählen?

In JavaScript ist es möglich, Text in einem inputoder textareaElement programmgesteuert auszuwählen . Sie können eine Eingabe mit fokussieren ipt.focus()und dann ihren Inhalt mit auswählen ipt.select(). Sie können sogar einen bestimmten Bereich mit auswählen ipt.setSelectionRange(from,to).

Meine Frage ist: Gibt es eine Möglichkeit, dies auch in einem contenteditableElement zu tun ?

Ich habe festgestellt, dass ich elem.focus()das Caret in ein contenteditableElement einfügen kann , aber anschließend elem.select()funktioniert das Laufen nicht (und auch nicht setSelectionRange). Ich kann im Web nichts darüber finden, aber vielleicht suche ich nach dem Falschen ...

Wenn es einen Unterschied macht, muss es übrigens nur in Google Chrome funktionieren, da dies für eine Chrome-Erweiterung gilt.

Wenn Sie den gesamten Inhalt eines Elements (inhaltlich bearbeitbar oder nicht) in Chrome auswählen möchten, gehen Sie wie folgt vor. Dies funktioniert auch in Firefox, Safari 3+, Opera 9+ (möglicherweise auch in früheren Versionen) und IE 9. Sie können auch eine Auswahl bis zur Zeichenebene erstellen. Die APIs, die Sie benötigen, sind DOM-Bereich (aktuelle Spezifikation ist DOM Level 2 , siehe auch MDN ) und Auswahl, die als Teil einer neuen Bereichsspezifikation ( MDN-Dokumente ) angegeben wird.

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

var el = document.getElementById("foo");
selectElementContents(el);

Zusätzlich zu Tim Downs Antwort habe ich eine Lösung entwickelt, die auch in oldIE funktioniert:

var selectText = function() {
  var range, selection;
  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(this);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }
};

document.getElementById('foo').ondblclick = selectText;​

Getestet in IE 8+, Firefox 3+, Opera 9+ und Chrome 2+. Sogar ich habe es in einem jQuery-Plugin eingerichtet:

jQuery.fn.selectText = function() {
  var range, selection;
  return this.each(function() {
    if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(this);
      range.select();
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = document.createRange();
      range.selectNodeContents(this);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  });
};

$('#foo').on('dblclick', function() {
  $(this).selectText();
});

... und wer interessiert ist, hier ist das gleiche für alle Kaffee-Junkies:

jQuery.fn.selectText = ->
  @each ->
    if document.body.createTextRange
      range = document.body.createTextRange()
      range.moveToElementText @
      range.select()
    else if window.getSelection
      selection = window.getSelection()
      range = document.createRange()
      range.selectNodeContents @
      selection.removeAllRanges()
      selection.addRange range
    return

Aktualisieren:

Wenn Sie die gesamte Seite oder den Inhalt eines bearbeitbaren Bereichs (gekennzeichnet mit contentEditable) auswählen möchten , können Sie dies viel einfacher tun, indem Sie zu Folgendem wechseln designModeund Folgendes verwenden document.execCommand:

Es gibt einen guten Ausgangspunkt bei MDN und eine kleine Dokumentation .

var selectText = function () {
  document.execCommand('selectAll', false, null);
};

(Funktioniert gut in IE6 +, Opera 9+, Firefoy 3+, Chrome 2+) http://caniuse.com/#search=execCommand

Da sich alle vorhandenen Antworten mit divElementen befassen , werde ich erklären, wie es mit spans geht.

Es gibt einen subtilen Unterschied bei der Auswahl eines Textbereichs in a span. Um den Textstart- und -endindex übergeben zu können, müssen Sie einen TextKnoten verwenden, wie hier beschrieben :

Wenn der startNode ein Knoten vom Typ Text, Comment oder CDATASection ist, ist startOffset die Anzahl der Zeichen ab dem Start von startNode. Bei anderen Knotentypen ist startOffset die Anzahl der untergeordneten Knoten zwischen dem Start des startNode.

var e = document.getElementById("id of the span element you want to select text in");
var textNode = e.childNodes[0]; //text node is the first child node of a span

var r = document.createRange();
var startIndex = 0;
var endIndex = textNode.textContent.length;
r.setStart(textNode, startIndex);
r.setEnd(textNode, endIndex);

var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);

Mit Rangy können Sie diesen Cross-Browser mit demselben Code ausführen. Rangy ist eine browserübergreifende Implementierung der DOM-Methoden zur Auswahl. Es ist gut getestet und macht dies viel weniger schmerzhaft. Ich weigere mich, Contenteditable ohne es zu berühren.

Rangy finden Sie hier:

http://code.google.com/p/rangy/

Mit rangy in Ihrem Projekt können Sie dies immer schreiben, auch wenn der Browser IE 8 oder früher ist und eine völlig andere native API für die Auswahl hat:

var range = rangy.createRange();
range.selectNodeContents(contentEditableNode);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);

Wobei "contentEditableNode" der DOM-Knoten ist, der das Attribut contenteditable hat. Sie könnten es so holen:

var contentEditable = document.getElementById('my-editable-thing');

Oder wenn jQuery bereits Teil Ihres Projekts ist und Sie es bequem finden:

var contentEditable = $('.some-selector')[0];

Die moderne Art, Dinge zu tun, ist so. Weitere Details zu MDN

document.addEventListener('dblclick', (event) => {
  window.getSelection().selectAllChildren(event.target)
})

<div contenteditable="true">Some text</div>

[Aktualisiert, um Fehler zu beheben]

Hier ist ein Beispiel, das aus dieser Antwort übernommen wurde und in Chrome gut zu funktionieren scheint - Wählen Sie den Bereich in contenteditable div aus

var elm = document.getElementById("myText"),
    fc = elm.firstChild,
    ec = elm.lastChild,
    range = document.createRange(),
    sel;
elm.focus();
range.setStart(fc,1);
range.setEnd(ec,3);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

HTML ist:

<div id="myText" contenteditable>test</div>