HTML usability question - (double) clicking to select text_问答_开发者

HTML usability question - (double) clicking to select text

开发者 https://www.devze.com 2023-01-03 21:55 出处：网络

As you well开发者_Go百科 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

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.

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>