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)
}
}