使用javascript在单个左键单击中选择div中的所有文本

Question

我在div中有一个简单的不可点击的链接，如下所示：

它意味着是一个可共享的链接，用户可以将粘贴复制到其他内容。

出于可用性目的，我想在div中的任意位置单击左键以选择整个链接：

我不太了解javascript / web编程，所以我尝试了以下内容：

<div id="share_link" onClick="select_all('share_link')"><%= request.url %></div>

和这个javascript

<script type="text/javascript">
    function select_all(id) {
        document.getElementById(id).focus();
    }
</script>

这不起作用。我想知道为了实现我想要的东西，我应该做的最简单的事情是什么。我考虑过将div更改为文本输入或将文本更改为链接，但理想情况下，内容应该是只读，不可编辑和不可点击的

Answer 1

与其他浏览器相比，这在IE中完全不同。以下内容适用于所有主流浏览器：

<script type="text/javascript">
    function select_all(el) {
        if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.select();
        }
    }
</script>

<div onclick="select_all(this)">Link text</div>

Answer 2

您可以在输入字段中使用jQuery：

$("#myInputField").focus(function(){
    // Select input field contents
    this.select();
});

您可以使用html中的readonly属性来掩盖它是输入字段的事实：

    <input type="text" name="country" value="Norway"
  readonly="readonly" />

使用CSS更改光标，使其不会提示文本输入，如：

cursor: crosshair;