JavaScript 实现禁止复制与粘贴功能

禁止复制与粘贴的实现原理

复制与粘贴是网民日常的基本操作，但部分网站出于版权保护目的（例如小说或图片类站点），会限制这些操作，从而防止浏览者通过复制粘贴方式传播页面内容。

oncopy 事件详解

oncopy 事件用于处理复制操作。

定义与用法说明如下。

当用户尝试拷贝元素上的内容时，oncopy 事件会被触发。

需要注意的是，oncopy 事件在拷贝元素时同样会触发，比如拷贝 <img> 元素时也会引发该事件。

通常，oncopy 事件应用于 type="text" 的 <input> 元素。

存在三种方式可以拷贝元素和内容。

第一种方式是按下键盘上的 CTRL + C 组合键。

第二种方式是在浏览器编辑菜单中选择 "Copy（复制）" 选项。

第三种方式是右击鼠标按钮，在弹出的上下文菜单中选择 "Copy（复制）" 命令。

关于浏览器对 oncopy 事件的支持情况。

具体语法格式如下。

在 HTML 中，可以通过以下方式实现。

<element oncopy="myScript">

在 JavaScript 中，赋值方式如下。

object.oncopy = function(){
 //操作 
  myScript 
}

在 JavaScript 中，还可以使用 addEventListener() 方法绑定事件。

object.addEventListener('copy',myScript);
//IE8及更早的IE版本不支持addEventListener()方法

onpaste 事件详解

onpaste 事件用于处理粘贴操作。

定义与用法说明如下。

当用户向元素中粘贴文本时，onpaste 事件会被触发。

需要注意的是，虽然 HTML 元素大多支持 onpaste 事件，但并非所有元素都有效。例如 <p> 元素，除非将其 contenteditable 属性设置为 "true"（详见下文更多实例）。

通常，onpaste 事件应用于 type="text" 的 <input> 元素。

存在三种方式可以在元素中粘贴内容。

• 按下键盘上的 CTRL + V 组合键 • 从浏览器编辑菜单中选择 "Paste（粘贴）" 选项 • 右击鼠标按钮，在上下文菜单中选择 "Paste（粘贴）" 命令。

关于浏览器对 onpaste 事件的支持情况。

<element onpaste="myScript">

在 JavaScript 中，赋值方式如下。

object.onpaste = function(){
 //操作
 myScript; 
}

在 JavaScript 中，使用 addEventListener() 方法绑定事件。

object.addEventListener('paste',myScript);
//Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

代码实现示例

实现原理简述。

核心思路是执行复制与粘贴事件，并在事件处理函数中返回 false 以阻止默认行为。

具体的 JavaScript 代码实现如下。

var bodyMain = document.getElementById('bodyMain' );
        
         //禁止复制
         bodyMain.oncopy = function(){
           return false;
        }
         //禁止粘贴
         bodyMain.onpaste = function(){
           return false;
}

以上即为 JavaScript 禁止复制与粘贴功能的完整实现代码，供参考使用。