Selezionare a livello di codice il testo in un elemento HTML modificabile con contenuto?

In JavaScript, è possibile selezionare a livello di codice il testo in un elemento inputo textarea. Puoi mettere a fuoco un input con ipt.focus(), quindi selezionarne il contenuto con ipt.select(). Puoi anche selezionare un intervallo specifico con ipt.setSelectionRange(from,to).

La mia domanda è: esiste un modo per farlo anche in un contenteditableelemento?

Ho scoperto che posso fare elem.focus(), mettere il cursore in un contenteditableelemento, ma successivamente l'esecuzione elem.select()non funziona (e non funziona setSelectionRange). Non riesco a trovare nulla sul web al riguardo, ma forse sto cercando la cosa sbagliata ...

A proposito, se fa qualche differenza, ho solo bisogno che funzioni in Google Chrome, poiché si tratta di un'estensione di Chrome.

Se vuoi selezionare tutto il contenuto di un elemento (contenteditable o no) in Chrome, ecco come. Funzionerà anche in Firefox, Safari 3+, Opera 9+ (forse anche versioni precedenti) e IE 9. Puoi anche creare selezioni fino al livello del personaggio. Le API di cui hai bisogno sono DOM Range (la specifica corrente è DOM Level 2 , vedi anche MDN ) e Selection, che viene specificata come parte di una nuova specifica Range ( documenti MDN ).

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

Oltre alla risposta di Tim Downs , ho realizzato una soluzione che funziona anche in 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;​

Testato in IE 8+, Firefox 3+, Opera 9+ e Chrome 2+. Anche io l'ho configurato in un plugin jQuery:

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

... e chi è interessato, ecco lo stesso per tutti i drogati di caffè:

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

Aggiornare:

Se desideri selezionare l'intera pagina o il contenuto di un'area modificabile (contrassegnata con contentEditable), puoi farlo molto più semplice passando a designModee utilizzandodocument.execCommand :

C'è un buon punto di partenza in MDN e una piccola documentazione .

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

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

Poiché tutte le risposte esistenti riguardano divelementi, spiegherò come farlo con spans.

C'è una sottile differenza quando si seleziona un intervallo di testo in un file span. Per poter passare l'indice iniziale e finale del testo, è necessario utilizzare un Textnodo, come descritto qui :

Se startNode è un nodo di tipo Text, Comment o CDATASection, startOffset è il numero di caratteri dall'inizio di startNode. Per altri tipi di nodo, startOffset è il numero di nodi figlio tra l'inizio di 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);

Rangy ti consente di eseguire questa operazione cross-browser con lo stesso codice. Rangy è un'implementazione cross-browser dei metodi DOM per le selezioni. È ben testato e lo rende molto meno doloroso. Mi rifiuto di toccare contenteditable senza di essa.

Puoi trovare rangy qui:

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

Con rangy nel tuo progetto, puoi sempre scrivere questo, anche se il browser è IE 8 o precedente e ha un'API nativa completamente diversa per le selezioni:

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

Dove "contentEditableNode" è il nodo DOM che ha l'attributo contenteditable. Potresti recuperarlo in questo modo:

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

O se jQuery fa già parte del tuo progetto e lo trovi conveniente:

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

Il modo moderno di fare le cose è così. Maggiori dettagli su MDN

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

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

[Aggiornato per correggere l'errore]

Ecco un esempio adattato da questa risposta che sembra funzionare bene in Chrome: seleziona l'intervallo in div contenteditable

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 è:

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