it-swarm.com.de

Programmgesteuertes Auswählen von Text in einem inhaltsbearbeitbaren HTML-Element?

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

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

Ich habe festgestellt, dass ich elem.focus() ausführen kann, um das Caret in ein contenteditable -Element einzufügen, aber anschließend elem.select() nicht ausgeführt werden kann (und auch nicht setSelectionRange). Ich kann im Internet nichts darüber finden, aber vielleicht suche ich nach dem Falschen ...

Übrigens, wenn es einen Unterschied macht, brauche ich es nur, um in Google Chrome zu arbeiten, da dies für eine Chrome Erweiterung ist.

101
callum

Wenn Sie den gesamten Inhalt eines Elements (inhaltsbearbeitbar 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 zum erstellen Die APIs, die Sie benötigen, sind DOM Range (aktuelle Spezifikation ist DOM Level 2 , siehe auch MDN ) und Selection, die wird als Teil einer new Range spec ( MDN docs ) angegeben.

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);
153
Tim Down

Zusätzlich zu Antwort von Tim Downs 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+, & Chrome 2+. Auch ich habe Setze es in ein jQuery Plugin ein:

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 sich dafür interessiert, hier 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

Update:

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

Es gibt ein gutes 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

34
yckart

Da sich alle vorhandenen Antworten auf div -Elemente beziehen, erkläre ich, wie dies mit spans gemacht wird.

Es gibt einen subtilen Unterschied bei der Auswahl eines Textbereichs in einem span. Um den Textanfangs- und -endeindex übergeben zu können, müssen Sie einen Text -Knoten verwenden, wie beschrieben hier :

Wenn der startNode ein Node vom Typ Text, Comment oder CDATASection ist, ist startOffset die Anzahl der Zeichen ab dem Start von startNode. Für andere Node= Typen , startOffset ist die Anzahl der untergeordneten Knoten zwischen dem Start des Startknotens.

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

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.

Hier finden Sie Rangy:

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 Auswahlen hat:

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

Wobei "contentEditableNode" der DOM-Knoten mit dem contenteditable-Attribut ist. Sie könnten es so abrufen:

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];
6
Tom Boutell

[Aktualisiert, um Fehler zu beheben]

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

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>
2
patorjk