How To Select Div Content With a Single Click

Copying a text from a website can be uncomfortable. Help your site visitors select the text with a single click of a mouse button with this simple trick.

In case of a <input> element, we have an easy job because we can solve that in just a couple lines of code:

$(".selectable").click(function() {
    $(this).select();
});

Unfortunately, this doesn’t work for whole div sections and many others.

The Code

Add the selectable class in your HTML code to each section you want to make selectable, like in the example below:

<h1 class="selectable">At persius imperdiet</h1>
<div class="selectable">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="selectable">
    <p>Quo debet vivendo ex.</p>
</div>

The JavaScript code parses the report and adds a custom identification to each element having our selector magnificence and an onclick occasion listener, which calls the selectText feature. This feature takes the container identification as they enter and selects the calculated variety. jQuery is required.

$(document).ready(function () {
    var selectcounter = 1;
    
    $(".selectable").each(function() {
        idja = "selectable" + selectcounter;
        $(this).attr('id', idja);
        $(this).attr('onclick', 'selectText("' + idja + '")');
        selectcounter++;
    });     
});

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
    }
}

We can set the mouse pointer to change when a selectable element has hovered with the CSS code below.

.selectable {
    cursor: pointer;
}

 

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *