要想实现这一功能,需要考虑三个方向来入手:
1.禁止用户选中文本并复制。
2.禁止鼠标右键复制粘贴。
3.禁止使用快捷键(如 Ctrl + C、Ctrl + V)复制粘贴。
需要注意的是,完全禁止用户复制内容是非常困难的,因为浏览器和操作系统提供了许多底层机制来实现复制和粘贴功能。但是,我们可以采取一些手段来限制这些功能并增加挡拦。
首先,我将向您展示一个基本的 JavaScript 代码块,该代码会阻止用户选择文本并复制到剪贴板上:
// Disable text selection and copying
document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener('copy', event => event.preventDefault());
此代码会捕获 "contextmenu" 和 "copy" 事件,并阻止这些事件的默认行为。这样做可以防止用户右键点击并选择菜单选项,也可以防止用户使用快捷键(如 Ctrl + C)复制内容。
这个方法并非完全无懈可挡,因为用户仍然可以使用其他方法复制文本。例如,他们可以选择整个页面的内容,然后将其粘贴到另一个应用程序中。要实现这一点,我们可以采取另一种方法:
// Prevent copying to clipboard and right-click menu
document.addEventListener('copy', event => {
if (navigator.clipboard && navigator.clipboard.writeText) {
event.preventDefault();
return navigator.clipboard.writeText('');
}
});
document.addEventListener('contextmenu', event => {
event.preventDefault();
});
这段代码会监听 "copy" 事件,如果发生该事件且浏览器支持 navigator.clipboard.writeText API,则阻止复制操作。然后,我们将剪贴板的内容清空。同样,我们会捕获 "contextmenu" 事件并阻止其默认行为,这样用户就无法使用鼠标右键菜单进行复制操作了。
需要注意的是,上述代码可能在某些浏览器中无法正常工作,因为许多浏览器都对复制粘贴功能的限制做出了限制。例如,Google Chrome 和 Mozilla Firefox 不允许网站完全禁止复制粘贴功能,所以看自已的项目需求。