每天網(wǎng)上的博客各個(gè)領(lǐng)域都會(huì)涌現(xiàn)新文章,有時(shí)候看到感興趣的知識(shí)就想把某段文字 copy下來 摘錄下來,等有時(shí)間后慢慢品味
10年積累的做網(wǎng)站、成都做網(wǎng)站經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有鹽田免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在部分網(wǎng)站上,如果只是復(fù)制少量文字,并沒有什么不同。但是當(dāng)我們復(fù)制的文字多的話會(huì)發(fā)現(xiàn)多了一個(gè)小尾巴
所謂小尾巴是指在復(fù)制文本的最后會(huì)多一個(gè)作者和出處信息,如下:
···(復(fù)制的內(nèi)容)···
————————————————
版權(quán)聲明:本文為xxx的原創(chuàng)文章,遵循CC 5.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://www.cdcxhl.com/
創(chuàng)新互聯(lián)可能并沒有這種情況,但是在很多技術(shù)論壇、創(chuàng)新互聯(lián)建站都有這樣的處理。當(dāng)我們復(fù)制文章內(nèi)容的時(shí)候,往往會(huì)自動(dòng)加上一段文本信息版權(quán)
那么如果我們也想實(shí)現(xiàn)這樣的效果要怎么做呢?
前提:假定所選擇的字符串長度大于等于130時(shí)帶上版權(quán)信息
示例一:這不是一個(gè) bug,這只是一個(gè)未列出來的特性。示例二:ES6 是一個(gè)泛指,含義是 5.1 版以后的 JavaScript。
ES6 是 JavaScript 語言的下一代標(biāo)準(zhǔn),已經(jīng)在 2015 年 6 月正式發(fā)布了。
它的目標(biāo),是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序,使之成為企業(yè)級(jí)開發(fā)語言。%0Avar%20copyEl%20%3D%20document.getElementById%28%27copy%27%29%3B%0AcopyEl.oncopy%20%3D%20function%20%28e%29%20%7B%0A%20%20if%20%28window.getSelection%280%29.toString%28%29.length%20%3E%3D%20130%29%20%7B%0A%20%20%20%20var%20clipboardData%20%3D%20event.clipboardData%20%7C%7C%20window.clipboardData%3B%0A%20%20%20%20//%20%u963B%u6B62%u9ED8%u8BA4%u4E8B%u4EF6%0A%20%20%20%20e.preventDefault%28%29%3B%0A%20%20%20%20var%20copyMsg%20%3D%0A%20%20%20%20%20%20window.getSelection%28%29%20+%0A%20%20%20%20%20%20%27%5Cr%5Cn%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%5Cr%5Cn%u7248%u6743%u58F0%u660E%uFF1A%u672C%u6587%u4E3Axxx%u7684%u539F%u521B%u6587%u7AE0%uFF0C%u9075%u5FAACC%204.0%20BY-SA%u7248%u6743%u534F%u8BAE%uFF0C%u8F6C%u8F7D%u8BF7%u9644%u4E0A%u539F%u6587%u51FA%u5904%u94FE%u63A5%u53CA%u672C%u58F0%u660E%u3002%27%20+%0A%20%20%20%20%20%20%27%5Cr%5Cn%u539F%u6587%u94FE%u63A5%uFF1A%27%20+%20location.href%3B%0A%20%20%20%20//%20%u5C06%u5904%u7406%u5B8C%u7684%u4FE1%u606F%u6DFB%u52A0%u5230%u526A%u5207%u677F%0A%20%20%20%20clipboardData.setData%28%27Text%27%2C%20copyMsg%29%3B%0A%20%20%7D%0A%7D%3B%0A
演示
瀏覽器兼容性
當(dāng)復(fù)制示例一后可以發(fā)現(xiàn)粘貼是正常的;復(fù)制示例二則會(huì)在末尾攜帶版權(quán)信息
我們直接復(fù)制代碼,會(huì)發(fā)現(xiàn)當(dāng)字?jǐn)?shù)超過一定值時(shí)也是會(huì)攜帶版權(quán)信息。但是點(diǎn)擊“復(fù)制代碼”的時(shí)候可以一鍵復(fù)制區(qū)域內(nèi)的代碼,這可以怎么實(shí)現(xiàn)呢?
// 浮點(diǎn)數(shù)相加
function mathMultiply(arg1, arg2) {
var m = 0;
var s1 = arg1.toString();
var s2 = arg2.toString();
try {
m += s1.split('.')[1].length; // 小數(shù)相乘,小數(shù)點(diǎn)后個(gè)數(shù)相加
} catch (e) {}
try {
m += s2.split('.')[1].length;
} catch (e) {}
return (
(Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) /
Math.pow(10, m)
);
}
%0A%20%20var%20btn%20%3D%20document.getElementById%28%27btn%27%29%3B%0A%20%20btn.onclick%20%3D%20function%20copyCode%28%29%20%7B%0A%20%20%20%20window.getSelection%28%29.removeAllRanges%28%29%3B%20//%20%u6E05%u9664%u9009%u4E2D%u7684%u6587%u672C%0A%20%20%20%20var%20range%20%3D%20document.createRange%28%29%3B%0A%20%20%20%20range.selectNode%28document.getElementById%28%27copyable%27%29%29%3B%0A%20%20%20%20var%20selection%20%3D%20window.getSelection%28%29%3B%0A%20%20%20%20selection.addRange%28range%29%3B%20//%20%u6DFB%u52A0%u9009%u4E2D%u7684%u5185%u5BB9%0A%20%20%20%20document.execCommand%28%27copy%27%29%3B%20//%20%u6267%u884C%u590D%u5236%0A%20%20%20%20window.getSelection%28%29.removeAllRanges%28%29%3B%20//%20%u6E05%u9664%u590D%u5236%u9009%u4E2D%u7684%u6587%u672C%0A%20%20%20%20alert%28%27%u4EE3%u7801%u590D%u5236%u6210%u529F%27%29%3B%0A%20%20%7D%3B%0A
演示
瀏覽器兼容性
document.execCommand()因?yàn)榘踩珕栴}已經(jīng)廢棄,不適合長期使用
第三方工具
除了以上實(shí)現(xiàn)方式,也可以使用第三方庫封裝好的函數(shù)來實(shí)現(xiàn)
clipboard.js
- 介紹:只有3k大小,不依賴任何框架
- GitHub:https://github.com/zenorocha/clipboard.js