HTML usability question - (double) clicking to select text

Question

As you well know, double clicking on a word in a browser selects it, triple clicking selects the entire paragraph.

I'm tweaking a wiki, where signatures for anonymous users are created automatically and they look like:

--- // <ip.ad.dr.ess> //

The "---" generates a — , // is for italic text and generates <em></em>.

This is how it works now, as I tweaked it. Now I'm wondering about the usability.

My question is: how to generate the markup such that upon a double click on the ip address, the whole address and only the address will be selected?

The markup language doesn't matter, you may provide a solution in HTML, but one specific for wikis (dokuwiki) is preferable.

Thanks

This is certainly solvable, but the solution is likely to be complicated. What is this for? Wouldn't it perhaps be easier to change the Wiki so it won't add the content automatically? — Pekka, Jun 20 '10 at 09:19
I am the one tweaking it to add that content. It works, but now I'm wondering about the accessibility — Flavius, Jun 20 '10 at 09:24

score 5 · Accepted Answer · answered Jun 26 '10 at 10:55

5

Thanks to everyone, but I've managed to do it by using a readonly text field set without borders and with the background color of the background of the website.

Double clicking works as expected, without relying on client-side scripting.

answered Jun 26 '10 at 10:55

Flavius

13,566
13
80
126

Lie Ryan · Answer 2 · 2010-06-20T11:26:20.990

2

You can't do that with HTML. Maybe with Javascript. Basically, you just detect double clicks in a certain area and then select the appropriate text.

EDIT:

Here's how to do it in W3C compliant browser (e.g. Firefox, it probably won't work in IE, which isn't a W3C compliant browser and uses different text selection model):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <script type="text/javascript">
            function select(elem) {
                var sel = window.getSelection();
                var range = sel.getRangeAt(0);
                range.selectNode(elem);
                sel.addRange(range);
            }            
        </script>
    </head>
    <body>
        <p>a simple paragraph, this is 
            <span onclick="select(this);">clickable area</span> 
            when this 
            <span ondblclick="select(this);">span tag is double-clicked</span>
            then they will be selected
        </p> 
    </body>
</html>

edited Jun 20 '10 at 11:26

answered Jun 20 '10 at 09:21

Lie Ryan

62,238
13
100
144

In latest chrome, what I get as the first parameter of the function is the event, so replaced the parameter with `e` and `elem` with `e.target` and it worked beautifully. – haridsv Oct 23 '14 at 08:03
As per `Event` documentation, the first parameter is in fact the event object itself, not the element. See https://developer.mozilla.org/en/docs/Web/API/Event. Edit: Just noticed that you are explicitly passing `this` as the first parameter. – haridsv Oct 23 '14 at 09:33
@haridsv: that is correct if you are attaching the event handler with addEventListener(). When the event is attached inline with @onclick attribute as in here, the parameters are determined by whatever you passed to the handler, which in this case is `this`, which is the element. Nowadays, it's probably a better practice to attach unobtrusively with addEventListener() or with jquery than attaching to onclick attribute. – Lie Ryan Oct 23 '14 at 09:46
Yes, I used jQuery selector with `bind()`, which must internally do `addEventListener`. Thanks for clarifying, I am still a newbie in web programming :) – haridsv Oct 23 '14 at 16:41

HTML usability question - (double) clicking to select text

2 Answers2