一次单击即可选择所有DIV文本

小编典典

一次单击即可选择所有DIV文本

javascript

当用户单击DIV时，如何突出显示/选择DIV标签的内容…这个想法是所有文本都被突出显示/选中，因此用户不需要用鼠标手动突出显示文本，并且可能错过了一点文字？

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

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

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

谢谢！

阅读 449

2020-05-01

共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作为参数传递，在这种情况下该ID是“可选的”，但它更具全局性，允许您多次在任何地方使用它，而不必像chiborg所提到的那样使用jQuery。

2020-05-01