javascript - 单击鼠标选择所有 DIV 文本

Question

如何在用户单击 DIV 时突出显示/选择 DIV 标签的内容...想法是突出显示/选择所有文本，因此用户无需手动突出显示带有鼠标并可能错过一些文本？

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

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

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

谢谢!

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。