当用户单击 DIV 时如何突出显示/选择 DIV 标签的内容......这个想法是突出显示/选择所有文本，因此用户不需要用鼠标手动突出显示文本，并且可能错过了一点文字？
例如，假设我们有一个如下所示的 DIV：
<div id="selectable">http://example.com/page.htm</div>
...并且当用户单击该 URL 中的任何一个时，整个 URL 文本都会突出显示，因此他们可以轻松地在浏览器中拖动所选文本，或通过右键单击复制完整的 URL。
谢谢！
单击鼠标选择所有 DIV 文本
IT技术
javascript
css
2021-01-17 05:33:15
6个回答
function selectText(containerid) {
if (document.selection) { // IE
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>现在您必须将 ID 作为参数传递，在这种情况下它是“可选的”，但它更具全局性，允许您在任何地方多次使用它，而无需使用 chiborg 提到的 jQuery。
2017 年更新：
要选择节点的内容调用：
window.getSelection().selectAllChildren(
document.getElementById(id)
);
这适用于所有现代浏览器，包括 IE9+（在标准模式下）。
可运行示例：
function select(id) {
window.getSelection()
.selectAllChildren(
document.getElementById("target-div")
);
}#outer-div { padding: 1rem; background-color: #fff0f0; }
#target-div { padding: 1rem; background-color: #f0fff0; }
button { margin: 1rem; }<div id="outer-div">
<div id="target-div">
Some content for the
<br>Target DIV
</div>
</div>
<button onclick="select(id);">Click to SELECT Contents of #target-div</button>下面的原始答案已过时，因为window.getSelection().addRange(range); 已被弃用
原答案：
上面的所有示例都使用：
var range = document.createRange();
range.selectNode( ... );
但问题在于它选择节点本身，包括 DIV 标签等。
要根据您需要调用的 OP 问题选择节点的文本：
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 );
}
}
有纯 CSS4 解决方案：
.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 */
}
user-select是 CSS Module Level 4 规范，目前是草案和非标准 CSS 属性，但浏览器很好地支持它 - 请参阅#search=user-select。
.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 */
}<div class="selectable">
click and all this will be selected
</div>在 MDN上阅读有关用户选择的更多信息，并在 w3scools 中使用它
Neuroxik 的回答真的很有帮助。我只有 Chrome 有问题，因为当我点击外部 div 时，它不起作用。我可以解决它在添加新范围之前删除旧范围：
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>
对于内容可编辑的内容（不是常规输入，您需要使用 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);
}