jQuery: Is there a way to turn 'click' events into double-clicks?

Question

How can I use jQuery to detect click events as double-clicks? Basically, I want the text in the .select class to be easier to select so the user can quickly copy the contents to the clipboard.

<li>
    <span>
        Don't Select me
    </span>
    <span>
        Don't Select me
    </span>
    <span class="select">
        Select Me on click!
    </span>
</li>

Here is similar question without jquery: http://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click — lcoronelp, Jul 17 '12 at 01:33
possible duplicate of [JQuery: Selecting Text in an Element (akin to highlighting with your mouse)](http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse) — Andrew Whitaker, Jul 17 '12 at 01:54
All the linked dupe possibilities only offer solutions for elements selected by ID only. This question (and solution) is for highlighting items selected by Class. — nipponese, Jul 17 '12 at 20:34

score 1 · Accepted Answer · edited May 23 '17 at 10:09

try this

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

$(function() {
    $('.select').click(function() {
        SelectText('selectme');
    });
});

Obtained from https://stackoverflow.com/a/987376/1330581

Example http://jsfiddle.net/edelman/KcX6A/339/

Update:

To select the content of the same clicked element:

function SelectText(element) {
    var doc = document;
    var text = element;    
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

$(function() {
    $('.select').click(function() {
        SelectText($(this)[0]); //Brackets are more efficiently that .get(0) method
    });
});

The example: http://jsfiddle.net/qBaWf/

I can't figure out why I'm getting `Uncaught SyntaxError: Unexpected token ILLEGAL` on the click event when I put this into my script tag... — nipponese, Jul 17 '12 at 16:48
Nevermind that, it was an issue copy and pasting from the fiddle (busted!). More on that here: http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit — nipponese, Jul 17 '12 at 16:51
Is there a way to select the element by class instead? I have twenty of these spans stacked on each other and I'd like all of them to be selectable. — nipponese, Jul 17 '12 at 16:59
@nipponese i updated the answer to select the text of the same element that was clicked. — lcoronelp, Jul 17 '12 at 20:24
I have a dude with `.get(0)` method or `[0]` property, the test http://jsperf.com/jquery-get-vs-brackets indicate that `[0]` is best! — lcoronelp, Jul 17 '12 at 21:18

jQuery: Is there a way to turn 'click' events into double-clicks?

1 Answers1