目录
内容介绍使用方法1、使用css2、使用js(二选一)3、完整代码内容介绍
在我们不希望 或某些情况下不希望用户复制页面信息时,应该考虑到选中复制
和鼠标右键
菜单复制等情况,下面分享一下这两种方法。
使用方法
1、使用css
/* 使用css禁止选中文本 */* {moz-user-select: -moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;}
2、使用js(二选一)
body标签<!-- body标签使用js禁止右键选择和选择复制 --><body oncontextmenu="return false;" onselectstart="return false;"></body>
js中使用
// 使用js禁止页面选择和鼠标右键document.oncontextmenu = function() {return false;};document.onselectstart = function() {return false;};
3、完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>禁止复制文本</title><style>/* 使用css禁止选中文本 */* {moz-user-select: -moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;}</style></head><!-- body标签使用js禁止右键选择和选择复制 --><body oncontextmenu="return false;" onselectstart="return false;"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim eum ducimus deleniti magnam aliquam vitae quidem sint, aut aliquid, dignissimos molestiae quia voluptatum exercitationem commodi blanditiis? Neque tenetur nam qui!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis magni tenetur officiis labore! Deleniti, officia nostrum. Eum recusandae, illum nisi modi voluptates totam sapiente quidem provident maiores! Tempore, fugit neque?</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod corrupti voluptatibus iste unde delectus? Laborum facere veniam deleniti voluptates ipsam. Dolorum, magnam odit error quod a sunt tempore maxime sed.</p><script>// 使用js禁止页面选择和鼠标右键// document.oncontextmenu = function() {//return false;// };// document.onselectstart = function() {//return false;// };</script></body></html>
注:
复制和禁止的方法不仅于此,而且兼容性等各不相同,如果有其他建议或相关问题可在留言区一起探讨。
标签:禁止选中,禁止复制,禁止鼠标右键
更多演示案例,查看案例演示
欢迎评论留言!