Geek Answers Handbook

Usability html - (double) to select text

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

I am setting up a wiki where signatures for anonymous users are created automatically and they look like this:

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

"---" generates -, // for italic text and generates <em> </em>.

This is how it works now, when I adjusted it. Now I wonder about usability.

My question is: how to generate markup so that when I double-click on the ip-address the whole address and only the address will be selected?

The markup language does not matter, you can provide a solution in HTML, but it is preferable to use it for a wiki (dokuwiki).

thank

+5
source share
2 answers

Thanks to everyone, but I managed to do this using a read-only text box set without borders and with the background color of the website background.

Double-clicking works as expected without relying on client scripts.

+5
source

You cannot do this with HTML. Maybe with javascript. Basically, you just detect double clicks in a specific area, and then select the appropriate text.

EDIT:

Here's how to do it in a browser compatible with W3C (for example, Firefox will probably not work in IE, which is not a browser compatible with W3C, and uses a 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>
+2

More articles:


All Articles