禁用网页文本操作：如何防止用户选择、剪切、复制、粘贴和右键单击

随心笔谈1年前发布编辑

143 0

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

如果您想防止其他人从您的网站上窃取内容，您可以借助 CSS、JavaScript 和 jQuery 在一定程度上做到这一点。在本文中，将带您学习如何禁用文本选择、剪切、复制、粘贴和右键单击网页。

使用 CSS 或 JavaScript 禁用文本选择

您可以使用 CSS、JavaScript 或 jQuery 禁用对整个网页或部分页面的文本选择。

如何使用 JavaScript 禁用完整网页的文本选择

使用 onmousedown 和 onselectstart 事件属性和 body 标签来禁用整个网页的文本选择。这些事件会覆盖浏览器的默认行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>This is the title of the web page</title>
</head>
<body onmousedown=”return false” onselectstart=”return false”>
<div>
博客成立于 2013 年，是独立运营的个人资源分享网站。
我们在所有技术方面的专业知识每个月都有数百万的访问者。
我们相信技术只有使用它的人才有用。
我们的目标是为像您这样的读者提供充分利用当今技术的专业知识，并以任何人都能理解的简单术语进行解释。
我们还鼓励读者以富有成效和有意义的方式使用技术。
</div>
</body>
</html>

如何使用 JavaScript 禁用部分网页的文本选择

将 onmousedown 和 onselectstart 事件属性与要禁用文本选择的 HTML 标记一起使用。在下面的示例中，第二个 div 标签的文本选择被禁用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>这是网页的标题</title>
</head>
<body>
<div>
已为此文本启用文本选择。
</div>
<div onmousedown=”return false” onselectstart=”return false”>
此文本禁用文本选择。
</div>
</body>
</html>

如何使用 CSS 禁用整个网页的文本选择

使用带有 body 标签的 user-select CSS 属性来禁用整个网页的文本选择。对于某些浏览器，您需要在用户选择之前添加扩展程序。以下是所有浏览器的完整属性列表：

Chrome, Opera: user-select
Safari: -webkit-user-select
Mozilla: -moz-user-select
IE 10+: -ms-user-select

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>这是网页的标题</title>
<style>
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
大博客成立于 2013 年，是独立运营的个人资源分享网站。
我们在所有技术方面的专业知识每个月都有数百万的访问者和社交媒体上的数十万粉丝。
我们相信技术只有使用它的人才有用。
我们的目标是为像您这样的读者提供充分利用当今技术的专业知识，并以任何人都能理解的简单术语进行解释。
我们还鼓励读者以富有成效和有意义的方式使用技术。
</div>
</body>
</html>

您需要将所有这些属性设置为 none 以禁用文本选择。

如何使用 CSS 禁用部分网页的文本选择

使用带有 HTML 标记的用户选择 CSS 属性来禁用文本选择。您可以使用类或 ID 来定位这些 HTML 元素。在下面的示例中，第二个 div 标签的文本选择被禁用。在这里， class 用于定位第二个 div。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>这是网页的标题</title>
<style>
.disable-text-selection {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
已为此文本启用文本选择。
</div>
<div class=”disable-text-selection”>
此文本禁用文本选择。
</div>
</body>
</html>

如何使用 JavaScript 禁用剪切、复制和粘贴

您可以使用目标 HTML 元素的 oncut、oncopy 和 onpaste 事件属性禁用剪切、复制和粘贴。如果要禁用整个网页的剪切、复制和粘贴，则需要将这些事件属性与 body 标记一起使用。您还可以使用 ondrag 和 ondrop 事件属性禁用拖放。在下面的示例中，对输入标签禁用剪切、复制、粘贴、拖放和放置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>这是网页的标题</title>
</head>
<body>
<div>
对以下输入元素禁用剪切、复制和粘贴。
</div>
<input
type=”text”
onselectstart=”return false”
oncut=”return false”
oncopy=”return false”
onpaste=”return false”
ondrag=”return false”
ondrop=”return false”
/>
</body>
</html>

如何使用 jQuery 禁用剪切、复制和粘贴

您可以使用 jQuery bind() 函数在网页上禁用剪切、复制和粘贴。在 bind() 函数中，您必须指定当用户尝试在网页上剪切、复制或粘贴任何内容时触发的剪切、复制和粘贴事件。在使用之前，请确保在 head 部分中嵌入 script 标签以加载 jQuery。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>这是网页的标题</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<div>
对整个网页禁用剪切、复制和粘贴。
</div>
<input type=”text” />
<script type=”text/javascript”>
$(document).ready(function() {
$(‘body’).bind(‘cut copy paste’, function(event) {
event.preventDefault();
});
});
</script>
</body>
</html>

如何使用 JavaScript 在网页上禁用右键单击

您可以通过使用 oncontextmenu 事件并在事件处理程序中包含“return false”来禁用网页上的右键单击。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>这是网页的标题</title>
</head>
<body>
<div>
对整个网页禁用右键单击。
</div>
<script type=”text/javascript”>
document.oncontextmenu = new Function(“return false”);
</script>
</body>
</html>

如何使用 jQuery 在网页上禁用右键单击

您可以使用上下文菜单事件禁用对网页的右键单击。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>这是网页的标题</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<div>
对整个网页禁用右键单击。
</div>
<script type=”text/javascript”>
$(document).bind(“contextmenu”,function(e){
return false;
});
</script>
</body>
</html>