Tạo khung chứa code với nút Copy to Clipboard trong blogspot

Tạo khung chứa code với nút Copy to Clipboard trong blogspot. Bài viết do anh Tuấn chia sẻ.
Demo: http://www.blogthuthuatwin10.com/p/copy-text-to-clipboard.h…

*css (</b:skin>)
pre.code {
color: black;
display: block;
background: #f1f5f9;
font-size: 13px;
max-height: 400px;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
overflow: auto;
text-align: left;
border: 1px solid #d5d5d5;
line-height: 13px;
margin: 1em 0 !important;
padding: 3px 20px 3px 7px !important;
}
* javascript (trước </head>)
<script type='text/javascript'>
function CopyToClipboard(containerid) {
if (document.selection) { 
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("Copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("Copy");
alert("Đã sao chép liên kết vào khay nhớ tạm!") 
}
}
</script>
*soạn bài viết (html)
<button id="button1" style="padding:7px 10px;font-size:14px;cursor:pointer;"onclick="CopyToClipboard('div1')">Copy to Clipboard</button>
<div id="div1" >
<pre class="code">

NỘI DUNG TRONG KHUNG 
</pre>
</div>
Giải thích chi tiết:
* Css (< / b: skin>)
Pre. Mã {
Màu: đen;
Hiển thị: khối;
Nền: #f1f5f9;
font-size: 13px;
Độ cao tối đa: 400 px;
Phông chữ: helvetica, Arial, sans-Serif;
font-size: 14px;
Tràn: tự động;
Sá º¯p hã ng & Äá ” ng:
Biên giới: 1 px đặc sản #d5d5d5;
Chiều cao: 13 px;
Lề: 1 em 0! Quan trọng;
Padding: 3 px 20 px 3 PX 7 px! Quan trọng;
}
* javascript (trước </head>)
<Script “type=” / JAVASCRIPT
Hàm Copytoclipboard (containerid) {
Nếu (Tài liệu. Chọn) {
Var tầm = Tài liệu. Thân. Createtextrange ();
Phạm Vi. Movetoelementtext (Tài liệu. Getelementbyid (containerid));
Phạm Vi. Chọn (). Createtextrange ();
Tài liệu. Execcommand (“bản sao”);} khác nếu (cửa sổ. Getselection) {
Var tầm = Tài liệu. Createrange ();
Phạm Vi. Selectnode (Tài liệu. Getelementbyid (containerid));
Cửa sổ. Getselection (). Addrange (Phạm Vi);
Tài liệu. Execcommand (“bản sao”);
alert(“Đã sao chép liên kết vào khay nhớ tạm!”)
}
}
< / script>
*soạn bài viết (html)
<Button id= ” button1″ style=” padding:7px 10 px; font-size:14px;cursor:pointer;”onclick=”CopyToClipboard(‘div1’)”>Copy để clipboard< / button>
<Div id= ” div1″ >
<Pre class= “Mã” >

NỘI DUNG TRONG KHUNG
< / pre>
< / div>

Tạo khung chứa code với nút Copy to Clipboard trong blogspot
5 / 1 vote

Cùng chuyên mục:

Add Comment