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

July 08, 2018 July 08, 2018
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.
Tags: #code , #copy,#khung chứa code,
Click to show more

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

Ads Above Article

Ads Inside Article 1

Ads Inside Article 2

Ads Bellow Article