内容介绍
在我们不希望 或某些情况下不希望用户复制页面信息时，应该考虑到 选中复制和 鼠标右键菜单复制等情况，下面分享一下这两种方法。
使用方法
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>
注：
复制和禁止的方法不仅于此，而且兼容性等各不相同，如果有其他建议或相关问题可在留言区一起探讨。
标签：禁止选中，禁止复制，禁止鼠标右键
更多演示案例，查看 案例演示
欢迎评论留言!
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
