1、使用 JS、CSS 分別實現禁止複製 HTML 頁面內容，會產生不同的頁面效果
2、如何實現禁止複製 HTML 頁面局部內容
一、複製html頁面內容，正確姿勢
使用鼠標拖動，選擇需要的文字，被選中的文字會變成藍色。複製、粘貼會得到想要的結果
二、JS 實現禁止複製
1.1、代碼實現：使用 onselectstart 事件，以下兩種方式均可
<html lang="en" onselectstart="return false">
或
document.onselectstart = function(e){
return false
};
1.2、效果（重複‘一’的正確姿勢）
選擇文字的時候會發現根本選不到——沒有任何文字變成藍色（選中的狀態）
2.1、代碼實現：使用 oncopy 事件，以下兩種方式均可
<body oncopy="return false">
或
document.oncopy = function(e){
return false
};
2.2、效果（重複‘一’的正確姿勢）
被選中的文字依然會變成藍色。但是複製之後，粘貼是沒有效果的——選中的內容沒有複製到剪切板
三、CSS 實現禁止複製
1、代碼實現
body{
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
}
2、效果（重複‘一’的正確姿勢）
選擇文字的時候會發現根本選不到——沒有任何文字變成藍色（選中的狀態）
四、如何實現禁止複製局部內容
複製表格時，如果有這樣的需求場景：不需要複製表格的操作項單元格，其他的單元格則可以被複制。
1.1、給目標單元格設定樣式
<table border="1">
<tr>
<th class="disableSelectText">操作</th>
<th>編號</th>
<th>名稱</th>
</tr>
<tr>
<td class="disableSelectText">刪除</td>
<td>test1</td>
<td>測試1</td>
</tr>
<tr>
<td class="disableSelectText">刪除</td>
<td>test2</td>
<td>測試2</td>
</tr>
</table>
.disableSelectText{
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
}
1.2、效果（重複‘一’的正確姿勢）
選中的文字就是我們想要複製的內容，但是在 excel 粘貼的時候會發現操作列還是被粘貼出來了
2、JS 能實現嗎
上述給局部元素設置樣式對複製並沒有效果，其實同樣，用js給局部元素添加事件依然無效：
- 因爲我們複製的是整個表格，
$('.disableSelectText').oncopy事件是不會被觸發的 $('.disableSelectText').onselectstart事件只會阻止鼠標在該元素上進行選擇，而鼠標移到表格外進行選擇的話，同樣可以複製整個表格
3、操作Selection和Range對象來實現
參考文章：【JavaScript編程】Selection對象和Range對象
代碼實現：
document.body.oncopy = function(e){
var sel, range, con
try {
sel = window.getSelection()
} catch (error) {
sel = document.selection // ie
}
range = sel.getRangeAt(0)
con = range.cloneContents()
if ($(con).find('.disableSelectText').length) {
// 刪除禁止複製的節點
$(con).find('.disableSelectText').remove()
var oDiv = document.createElement('div')
oDiv.style.position = 'fixed'
oDiv.style.top = '100%'
if ($(con).find('table').length) {
oDiv.appendChild(con)
}
else {
var oTable = document.createElement('table')
oTable.appendChild(con)
oDiv.appendChild(oTable)
}
document.body.appendChild(oDiv)
sel.selectAllChildren(oDiv)
}
}