以编程方式select可用的HTML元素中的文本？

在JavaScript中，可以以编程方式在input或textarea元素中select文本。 您可以使用ipt.focus()来集中input，然后使用ipt.select()select其内容。 你甚至可以用ipt.setSelectionRange(from,to)select一个特定的范围。

我的问题是：有没有办法在一个contenteditable要素上做到这一点？

我发现我可以做elem.focus() ，把插入符号放在一个contenteditable元素，但随后运行elem.select()不起作用（也没有setSelectionRange ）。 我在网上找不到任何东西，但也许我正在寻找错误的东西…

顺便说一句，如果它有什么不同，我只需要它在Google Chrome中工作，因为这是Chrome扩展。

Answer 1

如果你想在Chrome中select一个元素的所有内容（contenteditable或不），这里是如何。 这也将在Firefox，Safari 3 +，Opera 9+（可能还有更早的版本）和IE 9中工作。您还可以创buildselect到字符级别。 您需要的API是DOM范围（当前规范是DOM级别2 ，另请参阅MDN ）和select，它被指定为新的范围规范 （ 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

除了Tim Downs的回答 ，我提出了一个解决scheme，即使在老年人工作：

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

testingIE 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 

更新：

如果要select整个页面或可编辑区域的内容（用contentEditable标记），可以通过切换到designMode并使用document.execCommand来designMode操作：

MDN有一个很好的起点，还有一个小文件 。

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

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

Answer 3

Rangy允许您使用相同的代码来执行跨浏览器。 Rangy是用于select的DOM方法的跨浏览器实现。 它经过了很好的testing，并且使这个很less痛苦。 没有它，我拒绝接受。

你可以在这里findrangy：

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 4

既然所有现有的答案处理div元素，我会解释如何做span s。

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

如果startNode是Text，Comment或CDATASectiontypes的节点，则startOffset是从startNode开始的字符数。 对于其他节点types，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 5

[更新以修复错误]

这是一个从这个答案改编的例子，看起来在Chrome中工作得很好 – 在contenteditable div中select范围

 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快速search，给了我几个结果 。