雪鹰领主,古风,有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

前端復(fù)制問題

API介紹:
復(fù)制、剪切、粘貼事件：

成都創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都定制網(wǎng)頁設(shè)計(jì)方案、改版、費(fèi)用等問題，行業(yè)涉及成都履帶攪拌車等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

copy 發(fā)生復(fù)制操作時(shí)觸發(fā);
cut 發(fā)生剪切操作時(shí)觸發(fā);
paste 發(fā)生粘貼操作時(shí)觸發(fā);
每個(gè)事件都有一個(gè)before事件對(duì)應(yīng)：beforecopy、beforecut、beforepaste;

這幾個(gè)before一般不怎么用，所以我們把注意力放在另外三個(gè)事件就可以了。
觸發(fā)條件:

鼠標(biāo)右鍵菜單的復(fù)制、粘貼、剪切;

使用了相應(yīng)的鍵盤組合鍵，比如:command+c、command+v;
就算你是隨便按的，也會(huì)觸發(fā)事件。高程中介紹在Chorme、Firefox和Safari中，這幾個(gè)before事件只會(huì)在真實(shí)會(huì)發(fā)生剪貼板事件的情況下觸發(fā)，IE上則可以觸發(fā)before。我實(shí)際測試的時(shí)候最新版chorme也會(huì)亂按也會(huì)觸發(fā)，所以限制應(yīng)該是在早一點(diǎn)的版本上。
so 想說的是：before這幾個(gè)事件最好不要用,有關(guān)于剪切板的處理最好放在copy、cut、paste上面。

使用姿勢：
以copy為例:
document.body.oncopy = e => {
// 監(jiān)聽全局復(fù)制做點(diǎn)什么
}
// 還有這種寫法：
document.addEventListener("copy", e => {
// 監(jiān)聽全局復(fù)制做點(diǎn)什么
});
復(fù)制代碼
上面是在document.body上全局監(jiān)聽的，然而很多人不知道的是，我們還可以為某些dom單獨(dú)添加剪切板事件：
// html結(jié)構(gòu)

// 寫法一樣：
let test1 = document.querySelector('#test1');
test1.oncopy = e => {
// 監(jiān)聽test1發(fā)生的復(fù)制事件做點(diǎn)什么
// test1發(fā)生的復(fù)制事件會(huì)觸發(fā)回調(diào)，其他地方不會(huì)觸發(fā)回調(diào)
}
復(fù)制代碼
其他事件也是一樣的，這里就不贅述了。
clipboardData對(duì)象:用于訪問以及修改剪貼板中的數(shù)據(jù)
兼容：
不同瀏覽器，所屬的對(duì)象不同：在IE中這個(gè)對(duì)象是window對(duì)象的屬性，在Chrome、Safari和Firefox中，這個(gè)對(duì)象是相應(yīng)的event對(duì)象的屬性。所以我們在使用的時(shí)候，需要做一下如下兼容:
document.body.oncopy = e => {
let clipboardData = (e.clipboardData || window.clipboardData);
// 獲取clipboardData對(duì)象 + do something
}
復(fù)制代碼
對(duì)象方法：
對(duì)象有三個(gè)方法: getData()、setData()、clearData()

getData() 訪問剪切板中的數(shù)據(jù)
參數(shù)： getData()接受一個(gè)'text'參數(shù)，即要取得的數(shù)據(jù)的格式。
在復(fù)制、剪切、粘貼觸發(fā)的事件的數(shù)據(jù)：
實(shí)際上在chorme上測試只有paste粘貼的時(shí)候才能用getData()訪問到數(shù)據(jù)，用法如下：
要粘貼的數(shù)據(jù)：
document.body.onpaste = e => {
let clipboardData = (e.clipboardData || window.clipboardData); // 兼容處理
console.log('要粘貼的數(shù)據(jù)', clipboardData.getData('text'));
}
復(fù)制代碼
被復(fù)制/剪切的數(shù)據(jù)：
在復(fù)制和剪切中的數(shù)據(jù)，需要通過window.getSelection(0).toString()來訪問:
document.body.oncopy = e => {
console.log('被復(fù)制的數(shù)據(jù):', window.getSelection(0).toString());
}
復(fù)制代碼

setData(): 修改剪切板中的數(shù)據(jù)
參數(shù)：第一個(gè)參數(shù)也是'text'，第二個(gè)參數(shù)是要放在剪切板中的文本。
剩下的留在下面仿知乎/掘金復(fù)制大段文本添加版權(quán)信息那里再說。

clearData() :
這個(gè)方法就不太知道了，試了好久不知道怎么用(如果有大佬知道，可以在評(píng)論區(qū)指點(diǎn)一下)。
如果只是為了禁止復(fù)制，或者禁止粘貼，在下面還有另外的方法可以做到，并且可以細(xì)?；僮鳌?/p>

應(yīng)用:
如果學(xué)習(xí)不是為了裝X，那么一切將毫無意義，來看這個(gè)東西可以在哪些場景使用：
實(shí)現(xiàn)類知乎/掘金復(fù)制大段文本添加版權(quán)信息:
實(shí)現(xiàn)很簡單：取消默認(rèn)復(fù)制之后，主要是在被復(fù)制的內(nèi)容后面添加信息，然后根據(jù)clipboardData的setData()方法將信息寫入剪貼板。
可以直接復(fù)制這段代碼到本地去試試。
// 掘金這里不是全局監(jiān)聽，應(yīng)該只是監(jiān)聽文章的dom范圍內(nèi)。
document.body.oncopy = event => {
event.preventDefault(); // 取消默認(rèn)的復(fù)制事件
let textFont, copyFont = window.getSelection(0).toString(); // 被復(fù)制的文字等下插入
// 防知乎掘金復(fù)制一兩個(gè)字則不添加版權(quán)信息超過一定長度的文字就添加版權(quán)信息
if (copyFont.length > 10) {
textFont = copyFont + '\n'

'作者：OBKoro1\n'
'鏈接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n'
'來源：掘金\n'
'著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。';
} else {
textFont = copyFont; // 沒超過十個(gè)字則采用被復(fù)制的內(nèi)容。
}
if (event.clipboardData) {
return event.clipboardData.setData('text', textFont); // 將信息寫入粘貼板
} else {
// 兼容IE
return window.clipboardData.setData("text", textFont);
}
}
復(fù)制代碼
然后command+c、command+v，輸出:
你復(fù)制的內(nèi)容
作者：OBKoro1
鏈接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
復(fù)制代碼
實(shí)現(xiàn)類起點(diǎn)網(wǎng)的防復(fù)制功能:

禁止復(fù)制+剪切
禁止右鍵，右鍵某些選項(xiàng):全選，復(fù)制，粘貼等。
禁用文字選擇，能選擇卻不能復(fù)制，體驗(yàn)很差。
user-select 用css禁止選擇文本。

可以把代碼拷到本地玩一玩：
// 禁止右鍵菜單
document.body.oncontextmenu = e => {
console.log(e, '右鍵');
return false;
// e.preventDefault();
};
// 禁止文字選擇。
document.body.onselectstart = e => {
console.log(e, '文字選擇');
return false;
// e.preventDefault();
};
// 禁止復(fù)制
document.body.oncopy = e => {
console.log(e, 'copy');
return false;
// e.preventDefault();
}
// 禁止剪切
document.body.oncut = e => {
console.log(e, 'cut');
return false;
// e.preventDefault();
};
// 禁止粘貼
document.body.onpaste = e => {
console.log(e, 'paste');
return false;
// e.preventDefault();
};
// css 禁止文本選擇這樣不會(huì)觸發(fā)js
body {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
復(fù)制代碼
PS：

使用e.preventDefault()也可以禁用，但建議使用return false這樣就不用去訪問e和e的方法了。
示例中document.body全局都禁用了，也可以對(duì)dom(某些區(qū)域)進(jìn)行禁用。

破解防復(fù)制：
上面的防復(fù)制方法通過js+css實(shí)現(xiàn)的，所以思路就是：禁用js+取消user-select樣式。
Chrome瀏覽器的話：打開瀏覽器控制臺(tái)，按F1進(jìn)入Setting，勾選Disable JavaScript(禁止js)。

此時(shí)如果還不能復(fù)制的話，就要去找user-select樣式,取消這個(gè)樣式就可以了。

所以那些盜版小說手打的，我真的不太能理解，Excuse me？？？
點(diǎn)擊復(fù)制功能：
不能使用clipboardData：
在IE中可以用window.clipboardData.setData('text','內(nèi)容')實(shí)現(xiàn)。
上文提到過，在IE中clipboardData是window的屬性。
而其他瀏覽器則是相應(yīng)的event對(duì)象的屬性，這實(shí)際上是一種安全措施，防止未經(jīng)授權(quán)的訪問,為了兼容其他瀏覽器，所以我們不能通過clipboardData來實(shí)現(xiàn)這種操作。
具體做法：

創(chuàng)建一個(gè)隱藏的input框

點(diǎn)擊的時(shí)候，將要復(fù)制的內(nèi)容放進(jìn)input框中

選擇文本內(nèi)容input.select()
這里只能用input或者textarea才能選擇文本。

document.execCommand("copy")，執(zhí)行瀏覽器的復(fù)制命令。
function copyText() {
var text = document.getElementById("text").innerText; // 獲取要復(fù)制的內(nèi)容也可以傳進(jìn)來
var input = document.getElementById("input"); // 獲取隱藏input的dom
input.value = text; // 修改文本框的內(nèi)容
input.select(); // 選中文本
document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令
alert("復(fù)制成功");
}

dome---實(shí)例

我把你當(dāng)兄弟你卻想著復(fù)制我？

.wrapper {position: relative;}
#input {
position:absolute;
top:-10000px;
opacity: 0;
z-inde:-10;
}

function copyText() {
  var text = document.getElementById("text").innerText;
  var input = document.getElementById("input");
  input.value = text; // 修改文本框的內(nèi)容
  input.select(); // 選中文本
  document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令
  alert("復(fù)制成功");
}

本文題目：前端復(fù)制問題
文章出自：http://fisionsoft.com.cn/article/ipsjpp.html

新聞中心

其他資訊