9

I have a simple non-clickable link within a div that looks like this: alt text

It's meant to be a sharable link that the user can copy paste into other things.

For usability purposes, I want a single left click anywhere within the div to select the entire link: alt text

I don't know much about, javascript/web programming, so I've tried the following:

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

and this javascript

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

This doesn't work. I'd like to know what's the simplest thing I should do to achieve what I want. I thought about changing the div to a text input or the text within to be a link, but ideally the content within should be read-only, non-editable, and non-clickable

tstyle
  • 748
  • 1
  • 10
  • 23
  • 1
    Possible duplicate: http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse – Damiqib Jan 02 '11 at 12:55

2 Answers2

18

This is achieved completely differently in IE compared to other browsers. The following will work in all major browsers:

<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>
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • I tested this and it seems to work. But I ended up going with Sime's answer below for readability and compactness. Thank you. – tstyle Jan 03 '11 at 09:23
  • Fair enough, Šime's is probably the best solution. – Tim Down Jan 03 '11 at 12:25
  • 1
    I'm voting for yours Tim because it best fits the question which was to select text within a div, not an input with read only status. Thank you for the good answer. – Ark-of-Ice Nov 08 '13 at 19:40
6

You can use jQuery for this with an input field:

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

You can mask the fact that it is an input field using the readonly attribute in the html:

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

And use CSS to change the cursor so it won't hint a text input, something like:

cursor: crosshair;
CamelCamelCamel
  • 5,200
  • 8
  • 61
  • 93
  • 4
    It doesn't work. The problem is that you bind the focus event. As a result (for some reason) the selection does not persist. Binding the click event, however, does work. – Šime Vidas Jan 03 '11 at 01:16