Question

当用户点击DIV时，如何突出显示/选择DIV标签的内容...这个想法是所有文本都被突出显示/选中，因此用户无需手动突出显示文本鼠标可能会遗漏一些文字？

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

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

...当用户点击任何该网址时，整个网址文字会突出显示，以便他们可以轻松地在浏览器中拖动所选文字，或者通过右键单击复制完整的网址。

谢谢！

Answer 1

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。

Answer 2

2017年更新：

选择节点的内容调用：

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

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

自window.getSelection().addRange( range ); has been deprecated

以来，以下原始答案已过时

原始答案：

以上所有示例均使用：

    var range = document.createRange();
    range.selectNode( ... );

但问题在于它选择了Node本身，包括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 );
        }
    }

Answer 3

有纯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属性，但浏览器支持它很好 - 请参阅caniuse.com/#feat=user-select。

详细了解用户选择here on MDN并使用它here in w3scools

Answer 4

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>

Answer 5

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

注意：所有对＆＃34; document.selection＆＃34;的引用和＆＃34; createTextRange（）＆＃34;适用于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);

}

Answer 6

使用文本区域字段，您可以使用:(通过Google）

<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设计它，所以它看起来不像textarea。

Answer 7

This snippet provides the functionality you require。您需要做的是向该div添加一个事件，该事件激活其中的fnSelect。一个你完全不应该做而且可能不起作用的快速黑客看起来像这样：

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

显然假设已包含链接到代码段。

Answer 8

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

它将在div中选择测试。

Answer 9

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

<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">

当然，就像你提到的那样，它不是div-construction，但它仍然适用于我。

Answer 10

Niko Lay：这个简单的解决方案呢？：）

`<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”在我的代码中运行正常。单击鼠标即可在我的代码框中选择所有内容。

感谢Niko Lay的帮助！

Answer 11

$.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会删除之前添加的范围。除了使用css进行假选择之外，我没有找到任何解决方案。

Answer 12

使用css属性轻松实现user-select设置为all。像这样：

div.anyClass {
  user-select: all;
}

Answer 13

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

单击鼠标即可选择所有DIV文本

13 个答案:

2017年更新：

原始答案：