Multiple Tags To Select All Text Jquery

Updated on March 24, 2016
By using select all text jquery This blog allows visitors to select or block all text or code for the next copy. This is usually enabled on pre and blockquote are typically used to display the code css , html , or javascript on tutorial blog postings.
CSS code
blockquote{font:italic 14px Georgia;margin:10px 25px;padding:10px;line-height: 1.6em;color: #333;background: #ddd;border-left: 3px solid #aaa;transition:all .3s ease-in-out;position:relative;-webkit-touch-callout: text;-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;-o-user-select: text;user-select: text;}
blockquote:hover{background: #eee}
pre {color:#126AAF;margin:15px 25px 15px;padding:10px;clear:both;background:#f2f2f2;color:#666;border:1px solid #ddd;border-left:3px solid #bbb;overflow:auto;font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;font-weight: normal !important;font-style: normal !important;font-size: 12px !important;}
.code{border:#666 1px solid; padding:10px;}
HTML code like this:
<blockquote>
A lot of code goes here<br/>
Many lines of code or whatever
</blockquote>
<pre>
A lot of code goes here<br/>
Many lines of code or whatever
</pre>
<div class="code">
A lot of code goes here<br/>
Many lines of code or whatever
</div>
Javascript code with click event:
var pres = document.querySelectorAll('blockquote,pre,.code');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("click", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
Javascript code with Double-click event:
<script type='text/javascript'>
//<![CDATA[
var pres = document.querySelectorAll('blockquote,pre,div.code');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>
DEMO
Source
Share this: pinterest