Programmatisch Text in einem contenteditable HTML-Element auswählen?

In JavaScript, ist es möglich, programmgesteuert markieren Sie text in einer input oder textarea element. Sie können sich einen Eingang mit ipt.focus()und wählen Sie dann den Inhalt mit ipt.wählen Sie(). Sie können sogar wählen Sie einen bestimmten Bereich mit ipt.setSelectionRange(from,to).

Meine Frage ist: gibt es eine Möglichkeit, dies in einem contenteditable element zu?

Fand ich, dass ich tun kann elem.focus()setzen Sie die Einfügemarke in eine contenteditable element, aber anschließend läuft elem.select() funktioniert nicht (und auch nicht setSelectionRange). Ich kann nicht finden, alles, was im web über Sie, aber vielleicht bin ich auf der Suche für die falsche Sache...

Durch die Art und Weise, ob es einen Unterschied macht, ich brauche nur in Google Chrome, dies ist eine Chrome-Erweiterung.

InformationsquelleAutor der Frage callum | 2011-05-26

  1. 133

    Wenn Sie möchten, wählen Sie alle den Inhalt eines Elements (contenteditable oder nicht), in Chrom, hier ist, wie. Dies funktioniert auch in Firefox, Safari 3+, Opera 9+ (evtl. in früheren Versionen auch) und IE 9. Sie können auch erstellen, Auswahl nach unten, um die Stufe des Charakters. Die APIs die Sie benötigen, sind DOM-Bereich (aktuelle Skillung ist DOM Level 2siehe auch MDN) und die Auswahl, die ist festgelegt als Teil einer neue Range-spec (MDN docs).

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

    InformationsquelleAutor der Antwort Tim Down

  2. 33

    Neben Tim Downs Antwortich habe eine Lösung, die funktionieren auch im oldIE:

    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 im IE 8+, Firefox 3+, Opera 9+, & Chrom 2+. Auch ich habe es in einem jQuery-plugin:

    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 intereseted in, hier ist die 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 möchten, wählen Sie die gesamte Seite oder der Inhalt eines bearbeitbaren Bereichs (markiert mit contentEditable), können Sie es viel einfacher, durch die Umstellung auf designMode und mit document.execCommand:

    Gibt es eine gute Ausgangspunkt bei MDN und ein littledocumentation.

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

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

    InformationsquelleAutor der Antwort yckart

  3. 6

    Feingliedrige bietet Ihnen die Möglichkeit, cross-browser-mit dem gleichen code. Feingliedrig ist ein cross-browser-Implementierung des DOM-Methoden für die Auswahl. Es ist gut getestet und macht diese viel weniger schmerzhaft. Ich weigere mich zu berühren, contenteditable, ohne es.

    Finden Sie feingliedrige hier:

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

    Feingliedrig mit in Ihrem Projekt, Sie können immer schreiben, auch wenn der browser IE 8 oder älter und hat eine ganz andere native API für Selektionen:

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

    Wo "contentEditableNode" ist die DOM-Knoten mit dem contenteditable Attribut. Könnten Sie Sie Holen wie diese:

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

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

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

    InformationsquelleAutor der Antwort Tom Boutell

  4. 6

    Da alle vorhandenen Antworten befassen sich mit div Elemente, ich werde erklären, wie es zu tun mit spans.

    Gibt es einen feinen Unterschied, wenn die Auswahl einen Textbereich in einer span. Um zu können, geben Sie den text start-und Ende-index, Sie haben eine Text Knoten, wie beschrieben hier:

    Wenn der startNode ist ein Knoten vom Typ Text -, Kommentar-oder CDATASection,
    dann startOffset ist die Anzahl der Zeichen vom Beginn der
    startNode. Für die anderen Arten von Knoten, startOffset wird die Anzahl der Kind
    Knoten zwischen dem Beginn 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);

    InformationsquelleAutor der Antwort Domysee

  5. 2

    [Aktualisiert zu beheben Fehler]

    Hier ist ein Beispiel, das angepasst ist, von dieser Antwort, die scheint gut zu funktionieren, in Chrome - Wählen Sie die Option Bereich in contenteditable div

    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>

    InformationsquelleAutor der Antwort patorjk

  6. -6

    contenteditable ist nur ein Attribut, das ist, interpretiert vom browser. Sie können ändern, wie Elemente mit dem gewöhnlichen DOM-Funktionen.

    Sehen javascript TextRanges.

    Btw, schnelle Suche, die in SO, gab mir paar Ergebnisse.

    InformationsquelleAutor der Antwort Deele

Schreibe einen Kommentar