以编程方式选择 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

[更新修复错误]

这是一个改编自这个答案的示例，它似乎在 Chrome 中运行良好 - Select range 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 是：

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

Answer 2

如果您想在 Chrome 中选择元素的所有内容（无论是否可编辑），方法如下。这也适用于 Firefox、Safari 3+、Opera 9+（也可能是更早的版本）和 IE 9。您还可以创建低至字符级别的选择。您需要的 API 是 DOM Range（当前规范是 DOM Level 2，另请参阅 MDN）和 Selection，它被指定为 new 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);

Answer 3

除了Tim Downs answer，我还做了一个在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+ 和 Chrome 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 来简单得多：

有一个很好的starting point at MDN 和a littledocumentation。

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

（适用于 IE6+、Opera 9+、Firefoy 3+、Chrome 2+）http://caniuse.com/#search=execCommand

Answer 4

Rangy 允许您使用相同的代码跨浏览器执行此操作。 Rangy 是用于选择的 DOM 方法的跨浏览器实现。它经过了很好的测试，使这不那么痛苦。没有它，我拒绝触碰 contenteditable。

你可以在这里找到 rangy：

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

在您的项目中使用 rangy，您始终可以编写此代码，即使浏览器是 IE 8 或更早版本并且具有完全不同的原生 API 用于选择：

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

其中“contentEditableNode”是具有 contenteditable 属性的 DOM 节点。你可以这样获取它：

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

或者如果 jQuery 已经是您项目的一部分并且您觉得它很方便：

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

Answer 5

由于所有现有答案都处理div 元素，我将解释如何使用spans 来处理。

在span 中选择文本范围时存在细微差别。为了能够传递文本开始和结束索引，您必须使用Text 节点，如here 所述：

如果 startNode 是 Text、Comment 或 CDATASection 类型的节点， 那么 startOffset 是从开始的字符数 开始节点。对于其他节点类型，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 6

现代的做事方式是这样的。更多详情MDN

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

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