Multiple Tags To Select All Text Jquery

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 on Google+ Tumblr

Leave a comment

To insert a link, use tag [url=http://your_link]your-link[/url]
To insert the code , use the tag <i rel="code">your-code</i>
The long code can use the tag <i rel="pre">your-long-code</i>
To insert an image , use the code [img]URL Image[/img]
To insert a title , use tag <b rel="h4">Your Title here...</b>
To creat Bold text <strong>Your text here...</strong>
To create Italic text used tag <em>Your text here...</em>

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Cancel