单击鼠标select所有的DIV文本
当用户点击DIV时，如何突出显示/selectDIV标签的内容…这个想法是所有的文本都被突出显示/select，所以用户不需要用鼠标手动突出显示文本错过了一些文字？
例如，说我们有一个DIV如下：
<div id="selectable">http://example.com/page.htm</div> …当用户点击任何一个URL时，整个URL文本都会被突出显示，这样他们就可以轻松地在浏览器中拖动所选的文本，或者用右键单击复制完整的URL。
谢谢！
<script type="text/javascript"> function selectText(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } } </script> <div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>
现在，您必须将ID作为parameter passing，在这种情况下，它是“可select的”，但更具全局性，允许您在不使用的情况下多次使用它，如chiborg提到的jQuery。
2017年更新：
window.getSelection().addRange( range ); 已被弃用 ，但好消息是现在select节点内容更简单：
window.getSelection().selectAllChildren( document.getElementById( id ) );
这适用于所有现代浏览器，包括IE9 +（在标准模式下）。
原始答案：
以上所有的例子都使用：
var range = document.createRange(); range.selectNode( ... );
但是问题在于它select包含DIV标签等的节点本身
要根据OP问题select节点的文本，您需要调用：
range.selectNodeContents( ... )
所以完整的片段将是：
function selectText( containerid ) { var node = document.getElementById( containerid ); if ( document.selection ) { var range = document.body.createTextRange(); range.moveToElementText( node ); range.select(); } else if ( window.getSelection ) { var range = document.createRange(); range.selectNodeContents( node ); window.getSelection().removeAllRanges(); window.getSelection().addRange( range ); } }
Neuroxik的答案真的很有帮助。 我只有一个问题，因为当我点击一个外部股利，它没有工作。 我可以解决它删除旧的范围之前添加新的范围：
function selectText(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection()) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } } <div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>
有纯粹的CSS3解决scheme：
.selectable{ -webkit-touch-callout: all; /* iOS Safari */ -webkit-user-select: all; /* Safari */ -khtml-user-select: all; /* Konqueror HTML */ -moz-user-select: all; /* Firefox */ -ms-user-select: all; /* Internet Explorer/Edge */ user-select: all; /* Chrome and Opera */ }
用户select是非标准的CSS proberty，但浏览器的支持是好的。 https://developer.mozilla.org/en-US/docs/Web/CSS/user-select https://www.w3schools.com/cssref/playit.asp?filename=playcss_user-select&preval=all
对于内容可编辑的东西（不是常规的input，你需要使用selectNodeContents（而不是只是selectNode）。
注意：所有对“document.selection”和“createTextRange（）”的引用都是针对IE 8以及更低版本的…如果你试图做这样的棘手的事情，你不可能需要支持那个怪物。
function selectElemText(elem) { //Create a range (a range is a like the selection but invisible) var range = document.createRange(); // Select the entire contents of the element range.selectNodeContents(elem); // Don't select, just positioning caret: // In front // range.collapse(); // Behind: // range.collapse(false); // Get the selection object var selection = window.getSelection(); // Remove any current selections selection.removeAllRanges(); // Make the range you have just created the visible selection selection.addRange(range); }
使用文本区域，你可以使用这个：（通过谷歌）
<form name="select_all"> <textarea name="text_area" rows="10" cols="80" onClick="javascript:this.form.text_area.focus();this.form.text_area.select();"> Text Goes Here </textarea> </form>
这是我看到大多数网站做到这一点。 他们只是用CSS来devise，所以看起来不像textarea。
这个片段提供了你需要的function 。 你需要做的是添加一个事件到那个激活fnSelect的div。 一个简单的黑客，你完全不应该做，可能不会工作，看起来像这样：
document.getElementById("selectable").onclick(function(){ fnSelect("selectable"); });
显然假设链接到片段已被列入。
我发现把这个函数作为一个jQuery插件来包装是很有用的：
$.fn.selectText = function () { return $(this).each(function (index, el) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(el); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(el); window.getSelection().addRange(range); } }); }
所以，它成为一个可重用的解决scheme。 那么你可以这样做：
<div onclick="$(this).selectText()">http://example.com/page.htm</div>
它会selecttesting在div中。
这个简单的解决scheme如何？ 🙂
<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">
当然，这不是像你提到的那样，但是它仍然适用于我。
Niko Lay：这个简单的解决scheme呢？ 🙂
`<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">`
…..
之前的代码：
<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly">
后代码：
<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly" onclick="this.select();" id="selectable">
只是这部分onclick =“this.select（）;” 在我的代码id =“selectable”工作正常。 单击鼠标，在我的代码框中select所有。
感谢您的帮助Niko Lay！
$.fn.selectText = function () { return $(this).each(function (index, el) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(el); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(el); window.getSelection().addRange(range); } }); }
以上答案在Chrome中不起作用，因为addRange删除了之前添加的范围。 我没有find任何解决这个旁边的CSSselect假。
