简单前端web页面文字防复制粘贴剪切鼠标右键 F12 shift+ctrl+i等，多浏览器支持

最新推荐文章于 2024-05-18 07:45:00 发布

晚安何先生

最新推荐文章于 2024-05-18 07:45:00 发布

阅读量942

点赞数 2

分类专栏：前端加后端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/blake32/article/details/125335436

版权

前端加后端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单的实现javaScript层面的文字防复制，只能说防君子不妨小人，有兴趣的人可以试试

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>

body {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  -o-user-select:none;
  user-select: none;
  
}
</style>
</head>
 
<body>
    
	<div>		
	<h5>禁止复制+剪切禁止右键，右键某些选项:全选，复制，粘贴等。
		禁用文字选择，能选择却不能复制，体验很差。
		user-select 用css禁止选择文本。
		</h5>
	</div>
 
    <script>
    	    // 禁止右键菜单
    document.body.oncontextmenu = e => {
        console.log(e, '右键');
        return false;
        // e.preventDefault();
    };
    // 禁止文字选择。
    document.body.onselectstart = e => {
        console.log(e, '文字选择');
        return false;
        // e.preventDefault();
    };
    // 禁止复制
    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();
    };
	document.body.contentEditable="false"
    // css 禁止文本选择 这样不会触发js
	//禁止F12 shift+ctrl+i
    document.onkeydown = function () {
		console.log(111,window.event)
		console.log(22222,window.event.keyCode)
            if (window.event && window.event.keyCode == 123 || 
			window.event.keyCode == 17 || window.event.keyCode == 16 || window.event.keyCode == 73) {
                event.keyCode = 0;
                event.returnValue = false;
                return false;
            }
        };
	//禁止鼠标右键
		document.oncontextmenu = function(){
			event.returnValue = false;
		}//另一种
		document.oncontextmenu = function(){
			return false;
		}


    </script>
</body>
</html>

在现实开发中其实有更高级的文字防复制的方式

使用字体库进行加密，入如果有想了解的可以参考

前端反爬小技巧之字体库加密 - 知乎