Tạo button để copy nội dung trong khung chứa code cực đơn giản

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script> <style type="text/css"> #originalpost {position: fixed; top: 10px; background: #00ad62; padding: 5px;}#originalpost a { color: #fff; text-decoration: none;} pre{background:#ddd;margin:10px;padding:5px;font-family:consolas,monospace} .copycode{transition:all 200ms ease-in} .copycode{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0} .copycode{position:absolute;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;opacity:0;right:18px;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #00ad62;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none} .copycode:hover{background-color:#dcdcdc;background-image:none;border-color:#00ad62;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)} pre:hover .copycode{opacity:1} </style><br /><br /><br /> <pre><code>&lt;script type=&#39;text/javascript&#39;&gt; var postperpage=12; var numshowpage=3; var upPageWord =&amp;#39;Previous&amp;#39;; var downPageWord =&amp;#39;Next&amp;#39;; var urlactivepage=location.href; var home_page=&amp;quot;/&amp;quot;; &lt;/script&gt; </code></pre> <script type="text/javascript"> $(document).ready(function(){var b=$("pre code"),a="<button class='copycode'>Copy</button>";b.before(a)});(function(a){a.fn.selectText=function(){var e=document;var c=this[0];console.log(this,c);if(e.body.createTextRange){var b=document.body.createTextRange();b.moveToElementText(c);b.select()}else{if(window.getSelection){var d=window.getSelection();var b=document.createRange();b.selectNodeContents(c);d.removeAllRanges();d.addRange(b);document.execCommand("Copy")}}};a.fn.removeRange=function(){if(window.getSelection){if(window.getSelection().empty){window.getSelection().empty()}else{if(window.getSelection().removeAllRanges){window.getSelection().removeAllRanges()}}}else{if(document.selection){document.selection.empty()}}}})(jQuery);$(document).ready(function(){$(".copycode").click(function(){var b=$(this).parent().find("code"),a=$(this),g="Copied",f=a.text();b.selectText();a.html(g);setTimeout(function(){a.html(f);b.removeRange()},1000)})}); </script> <div id="originalpost"><a href="https://www.thichnet.com/2018/07/tao-button-copy-noi-dung-trong-khung-chua-code.html" target="_blank">Go to this Tutorial</a></div>

​x

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>

<style type="text/css">

#originalpost {position: fixed; top: 10px; background: #00ad62; padding: 5px;}#originalpost a { color: #fff; text-decoration: none;}

 pre{background:#ddd;margin:10px;padding:5px;font-family:consolas,monospace}

.copycode{transition:all 200ms ease-in}

.copycode{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}

.copycode{position:absolute;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;opacity:0;right:18px;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #00ad62;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}

.copycode:hover{background-color:#dcdcdc;background-image:none;border-color:#00ad62;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}

pre:hover .copycode{opacity:1}

</style><br /><br /><br />

<pre><code>&lt;script type=&#39;text/javascript&#39;&gt;

var postperpage=12;

var numshowpage=3; 

var upPageWord ='Previous';

var downPageWord ='Next';

var urlactivepage=location.href;

var home_page="/";

</script>

</code></pre>

<script type="text/javascript">

$(document).ready(function(){var b=$("pre code"),a="<button class='copycode'>Copy</button>";b.before(a)});(function(a){a.fn.selectText=function(){var e=document;var c=this[0];console.log(this,c);if(e.body.createTextRange){var b=document.body.createTextRange();b.moveToElementText(c);b.select()}else{if(window.getSelection){var d=window.getSelection();var b=document.createRange();b.selectNodeContents(c);d.removeAllRanges();d.addRange(b);document.execCommand("Copy")}}};a.fn.removeRange=function(){if(window.getSelection){if(window.getSelection().empty){window.getSelection().empty()}else{if(window.getSelection().removeAllRanges){window.getSelection().removeAllRanges()}}}else{if(document.selection){document.selection.empty()}}}})(jQuery);$(document).ready(function(){$(".copycode").click(function(){var b=$(this).parent().find("code"),a=$(this),g="Copied",f=a.text();b.selectText();a.html(g);setTimeout(function(){a.html(f);b.removeRange()},1000)})});

​

</script>

​

​

<div id="originalpost"><a href="https://www.thichnet.com/2018/07/tao-button-copy-noi-dung-trong-khung-chua-code.html" target="_blank">Go to this Tutorial</a></div>

​