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
Source
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;}HTML code like this:
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;}
<blockquote>Javascript code with click event:
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>
var pres = document.querySelectorAll('blockquote,pre,.code');Javascript code with Double-click event:
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);
}
<script type='text/javascript'>DEMO
//<![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>
Source
0 comments for Multiple Tags To Select All Text Jquery