单击鼠标选择所有 DIV 文本

javascript css

2022-08-30 02:36:10

如何在用户单击 DIV 时突出显示/选择 DIV 标记的内容...这个想法是所有文本都突出显示/选择，因此用户不需要用鼠标手动突出显示文本，并且可能会错过一些文本？

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

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

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

谢谢！

答案 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。

答案 2

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