Double Click auto selection Text

Double Click auto selection Text

by Adi Jaya

HTML

<br><br><br>

<blockquote class="box" data-label="My Quote" data-after="double click for selection">
Lorem Ipsum dilor sit amet Lorem Ipsum dilor sit ametLorem Ipsum dilor sit amet Lorem Ipsum dilor sit amet Lorem Ipsum dilor sit amet Lorem Ipsum dilor sit amet Lorem Ipsum dilor sit amet Lorem Ipsum dilor sit amet Lorem Ipsum dilor sit amet Lorem Ipsum dilor sit amet
</blockquote>

<hr>

<pre class="box" data-label="CSS" data-after="double click for selection">
.box {
    background: #000000;
    padding: 10px;
    margin: 0;
    position: relative;
    color: #a2a2a2;
    font-size: 14px;
    padding-top: 35px;
}
</pre>

SCSS

blockquote.box {
    background: #610909;
    padding: 10px;
    margin: 0;
    position: relative;
    color: #a2a2a2;
    font-size: 14px;
    padding-top: 35px;
}
pre.box {
    background: #000000;
    padding: 10px;
    margin: 0;
    position: relative;
    color: #a2a2a2;
    font-size: 14px;
    padding-top: 35px;
}

.box:before {
    content: "" attr(data-label) "";
    background-color: #7b1717;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    padding: 5px;
}
.box:after {
    display: none;
    content: "" attr(data-after) "";
    position: absolute;
    right: 10px;
    top: 5px;
}
.box:before, .box:after {
    color: #b7b1a8;
}
.box:hover:after  {
  display : block;
  color: #fff;
}

JavaScript

//pure js
// fb.com/nafis3333

var seleksi = document.querySelectorAll('pre,blockquote');
for (var i = 0; i < seleksi.length; i++) {
    seleksi[i].addEventListener("dblclick", function() {
        var selection = getSelection();
        var range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    }, false);
}