使用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;