Javascript 用鼠标单击选择所有DIV文本

当用户单击DIV时，如何突出显示/选择DIV标记的内容。其想法是，所有文本都突出显示/选择，因此用户不需要手动用鼠标突出显示文本，并且可能会遗漏一些文本

例如，假设我们有一个DIV，如下所示：

<div id="selectable">http://example.com/page.htm</div>

http://example.com/page.htm

…当用户单击该URL中的任何一个时，整个URL文本将高亮显示，以便他们可以轻松地在浏览器中拖动选定的文本，或通过右键单击复制完整的URL

---

谢谢

使用文本区域字段，您可以使用：（通过谷歌）

这里有文字

我看到大多数网站都是这样做的。他们只是用CSS来设置样式，这样看起来就不像是文本区域。

。您需要做的是向该div添加一个事件，该事件在其中激活fnSelect。一个你完全不应该做而且可能不起作用的快速破解，看起来是这样的：

document.getElementById("selectable").onclick(function(){
    fnSelect("selectable");
});

显然，假设已包含链接到代码段的内容。

函数选择文本（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））；
getSelection（）.removeAllRanges（）；
window.getSelection（）.addRange（范围）；
}
}

---

http://example.com/page.htm

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>

函数选择文本（containerid）{
if（文档选择）{
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））；
getSelection（）.removeAllRanges（）；
window.getSelection（）.addRange（范围）；
}
}
http://example.com/page.htm

我发现将此函数包装为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);
        }
    });
}

因此，它成为一个可重用的解决方案。然后你可以这样做：

<div onclick="$(this).selectText()">http://example.com/page.htm</div>

http://example.com/page.htm

它将在div中选择测试。

2017年更新： 要选择节点的内容调用：

window.getSelection().selectAllChildren(
    document.getElementById(id)
);

这适用于所有现代浏览器，包括IE9+（标准模式）

可运行示例：

功能选择（id）{
window.getSelection（）
.选择所有儿童(
document.getElementById（“目标div”）
);
}

#外部分区{填充：1rem；背景色：#fff0f0；}
#目标分区{填充：1rem；背景色：#f0fff0；}
按钮{margin:1rem；}

本书的一些内容

目标部门
单击以选择#目标div的内容

---

上述答案在Chrome中不起作用，因为addRange删除了以前添加的范围。除了使用css进行虚假选择之外，我没有找到任何解决方案。

这个简单的解决方案怎么样？：）

---

当然，这不是你提到的div构造，但对我来说仍然有效。

对于内容可编辑的内容（不是常规输入，你需要使用selectNodeContents（而不仅仅是selectNode）

注意：所有对“document.selection”和“createTextRange（）”的引用都是针对IE8和更低版本的…如果你试图做这样棘手的事情，你可能不需要支持这个怪物

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

}

尼科·雷： 这个简单的解决方案怎么样？：）

``

前代码：

<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”工作得很好。 单击鼠标即可选择“我的代码”框中的所有内容

---

谢谢你的帮助Niko Lay

有纯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模块4级规范，目前是一个草稿和非标准CSS属性，但浏览器支持它-请参阅

。可选{
-webkit touch callout:all；/*iOS Safari*/
-webkit用户选择：全部；/*Safari*/
-khtml用户选择：全部；/*Konquer或HTML*/
-moz用户选择：全部；/*Firefox*/
-ms用户选择：全部；/*Internet Explorer/Edge*/
用户选择：全部；/*Chrome和Opera*/
}

单击，所有这些都将被选中

使用css属性“用户选择”设置为“全部”，可以轻松实现。像这样：

div.anyClass{
用户选择：全部；
}

BTW，您可以轻松地将其转换为jQuery click事件处理程序，将

document.getElementById（'selectable'）

替换为

this

。然后，您可以悄悄地将功能添加到多个元素，例如容器中的多个div:

jQuery（“#selectcontainer div”）。单击（selectText）这在Chrome、FF、Safari（Mac）、Chrome和IE（未测试Windows 9+、8）上运行良好。但它在iPad Mini（iOS6）或iPhone 4上的Safari上似乎不起作用，对其他iOS或Android也不确定。根据本文，Opera（）的查询
if（window.getSelection）{
应该放在第一位。这个解决方案在ie11中似乎不起作用。知道为什么吗？在Chrome版本36+中，这将返回一个错误“不支持不连续选择”。解决方法是在
window.getSelection（）.removeAllRanges（）之前添加
window.getSelection（）.addRange（range）；
记住调用window.getSelection（）.removeAllRanges（）；就像Josillo的代码一样。另外：我主张将window.getSelect作为第一个选项，因为这是HTML5标准和文档。selection是IE8和更早版本的旧IE回退。对于某些人来说，这段代码可能会有所帮助，因为我已经在最新版本的Chr中测试并发现它可以工作
`<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">

.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 */

}

export const selectText = (containerId) => {
  let selection = window.getSelection()
  let myElement = document.getElementById(containerId)

  if (selection.rangeCount > 0) {
    selection.removeAllRanges()
  }

  let range = document.createRange()
  range.selectNode(myElement)
  selection.addRange(range)
}**The most simplest answer works in all browsers**