Programistycznie zaznaczać tekst w edytowalnym z treścią elemencie HTML?

W JavaScript można programowo zaznaczyć tekst w elemencie inputlub textarea. Możesz ipt.focus()zaznaczyć wejście za pomocą , a następnie wybrać jego zawartość za pomocą ipt.select(). Możesz nawet wybrać konkretny zakres za pomocą ipt.setSelectionRange(from,to).

Moje pytanie brzmi: czy istnieje sposób, aby to zrobić również w contenteditableelemencie?

Odkryłem, że mogę to zrobić elem.focus(), aby umieścić kursor w contenteditableelemencie, ale później uruchomienie elem.select()nie działa (i nie działa setSelectionRange). Nie mogę znaleźć nic na ten temat w sieci, ale może szukam niewłaściwej rzeczy ...

Nawiasem mówiąc, jeśli to robi jakąkolwiek różnicę, potrzebuję go tylko do pracy w Google Chrome, ponieważ to jest dla rozszerzenia Chrome.

Jeśli chcesz zaznaczyć całą zawartość elementu (z możliwością edycji treści lub nie) w Chrome, oto jak to zrobić. Działa to również w przeglądarkach Firefox, Safari 3+, Opera 9+ (prawdopodobnie także we wcześniejszych wersjach) i IE 9. Możesz także tworzyć zaznaczenia aż do poziomu postaci. Potrzebne interfejsy API to DOM Range (aktualna specyfikacja to DOM Level 2 , zobacz także MDN ) i Selection, która jest określana jako część nowej specyfikacji Range ( dokumentacja 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);

Oprócz odpowiedzi Tima Downsa stworzyłem rozwiązanie, które działa nawet w 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;​

Przetestowano w IE 8+, Firefox 3+, Opera 9+ i Chrome 2+. Nawet skonfigurowałem go we wtyczce 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();
});

... a kogo to interesuje, oto to samo dla wszystkich miłośników kawy:

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

Aktualizacja:

Jeśli chcesz zaznaczyć całą stronę lub zawartość edytowalnego regionu (oznaczonego flagą contentEditable), możesz to zrobić znacznie prościej, przełączając się na designModei używając document.execCommand:

W MDN jest dobry punkt wyjścia i niewielka dokumentacja .

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

(działa dobrze w IE6 +, Opera 9+, Firefoy 3+, Chrome 2+) http://caniuse.com/#search=execCommand

Ponieważ wszystkie istniejące odpowiedzi dotyczą divelementów, wyjaśnię, jak to zrobić za pomocą spans.

Istnieje subtelna różnica podczas wybierania zakresu tekstu w pliku span. Aby móc przekazać indeks początkowy i końcowy tekstu, musisz użyć Textwęzła, jak opisano tutaj :

Jeśli startNode jest węzłem typu Text, Comment lub CDATASection, to startOffset to liczba znaków od początku startNode. W przypadku innych typów węzłów startOffset to liczba węzłów podrzędnych między początkiem węzła 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 pozwala ci to zrobić w różnych przeglądarkach z tym samym kodem. Rangy to implementacja metod DOM do selekcji w różnych przeglądarkach. Jest dobrze przetestowany i sprawia, że ​​jest to o wiele mniej bolesne. Nie chcę dotykać treści do edycji bez tego.

Możesz znaleźć rangy tutaj:

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

Mając rangy w swoim projekcie, zawsze możesz to napisać, nawet jeśli przeglądarka to IE 8 lub starsza i ma zupełnie inny natywny interfejs API do wyboru:

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

Gdzie „contentEditableNode” to węzeł DOM z atrybutem contenteditable. Możesz to pobrać w ten sposób:

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

Lub jeśli jQuery jest już częścią twojego projektu i uważasz to za wygodne:

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

Taki jest nowoczesny sposób robienia rzeczy. Więcej informacji o MDN

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

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

[Zaktualizowano, aby naprawić błąd]

Oto przykład zaadaptowany na podstawie tej odpowiedzi, który wydaje się działać dobrze w przeglądarce Chrome - Wybierz zakres w edytowalnym 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 to:

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