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

Tạo button để copy nội dung trong khung chứa code cực đơn giản, rất nhẹ cho các bạn làm blog thủ thuật:
- Không phức tạp khi viết bài, chỉ cần đặt code trong cặp thẻ <pre><code>...</code></pre>.
- Chỉ sử dụng script dung lượng nhỏ kết hợp với thư viện Jquery, tốc độ rất nhanh.


Trước khi thực hiện thủ thuật thì phải đảm bảo trong theme có sẵn thư viện Jquery.

Bước 1: Thêm CSS

<style type='text/css'>
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>

Bước 2: Thêm script trước thẻ đóng </body>

<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>

Xong.