Программно выделить текст в contenteditable элемент HTML?

Question

В JavaScript можно программно выбирать текст в элементе input или textarea.Вы можете сфокусировать вход с помощью ipt.focus(), а затем выбрать его содержимое с помощью ipt.select().Вы даже можете выбрать определенный диапазон с помощью ipt.setSelectionRange(from,to).

Мой вопрос: есть ли способ сделать это также в элементе contenteditable?

Я обнаружил, что могу сделать elem.focus(), чтобы поместить символ вставки в элемент contenteditable, но впоследствии запуск elem.select() не работает (и не работает setSelectionRange).Я не могу найти в Интернете ничего об этом, но, возможно, я ищу не ту вещь ...

Кстати, если это имеет какое-то значение, мне нужно только это для работы в Google Chrome, так как это для расширения Chrome.

Answer 1

Если вы хотите выбрать все содержимое элемента (contenteditable или нет) в Chrome, вот как. Это также будет работать в Firefox, Safari 3+, Opera 9+ (возможно, и в более ранних версиях) и IE 9. Вы также можете создавать выборки вплоть до уровня персонажа. API, которые вам нужны, это DOM Range (текущая спецификация DOM Level 2 , см. Также MDN ) и Selection, который указывается как часть новой спецификации Range ( 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);

Answer 2

В дополнение к ответу Тима Даунса , я разработал решение, которое работает даже в 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;​

Проверено в IE 8+, Firefox 3+, Opera 9+ иХром 2+.Даже я настроил его в плагин 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();
});

... и кто заинтересован, вот то же самое для всех любителей кофе:

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

Обновление:

Если вы хотите выбрать всю страницу или содержимое редактируемой области (помеченной contentEditable), вы можете сделать это намного проще, переключившись на designMode и используя document.execCommand:

В MDN и есть хорошая отправная точка .

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

(хорошо работает в IE6 +, Opera 9+, Firefoy).3+, Chrome 2+) http://caniuse.com/#search=execCommand

Answer 3

Поскольку все существующие ответы имеют дело с div элементами, я объясню, как это сделать с span s.

Существует небольшая разница при выборе диапазона текста в span.Чтобы иметь возможность передавать начальный и конечный текстовый индекс, вы должны использовать узел Text, как описано здесь :

Если startNode является узломвведите Text, Comment или CDATASection, затем startOffset - это количество символов от начала startNode.Для других типов узлов, startOffset - это количество дочерних узлов между началом 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);

Answer 4

Rangy позволяет сделать этот кросс-браузер с одним и тем же кодом. Rangy - это кросс-браузерная реализация методов DOM для выбора. Это хорошо проверено и делает это намного менее болезненным. Я отказываюсь прикасаться к contenteditable без этого.

Ранги можно найти здесь:

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

Имея ранги в вашем проекте, вы всегда можете написать это, даже если браузер IE 8 или более ранний и имеет совершенно другой собственный API для выбора:

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

Где "contentEditableNode" - это узел DOM, имеющий атрибут contenteditable. Вы можете получить это так:

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

Или, если jQuery уже является частью вашего проекта и вам это удобно:

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

Answer 5

[Обновлено, чтобы исправить ошибку] ​​

Вот пример, адаптированный из этого ответа, который хорошо работает в Chrome - Выбор диапазона в 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 это:

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

Answer 6

contenteditable - это просто атрибут, который интерпретируется браузером. Вы можете изменять такие элементы с помощью обычных функций DOM.

См. JavaScript TextRanges .

Кстати, быстрый поиск в SO, дал мне пару результатов .