当前位置: 首页 > 教程资源 > 正文
如何禁用网页上的文本选择、剪切、复制、粘贴和右键单击功能

如何禁用网页上的文本选择、剪切、复制、粘贴和右键单击功能

作者:大眼仔~旭 日期:3年前 (2021-06-08) 评论:1 条

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

如果您想防止其他人从您的网站上窃取内容,您可以借助 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>

保护您的网站免受侵害

使用一切可能的工具从受保护的页面窃取数据、垃圾邮件网站或破解敏感信息。 为您的网站添加一个安全层以防止这些是必不可少的。 垃圾邮件网站表单是当今最常见的攻击之一。 尝试将 CAPTCHA 验证添加到您网站的表单中,以避免这些垃圾邮件攻击。

声明:大眼仔旭 | 本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
文章名称:《如何禁用网页上的文本选择、剪切、复制、粘贴和右键单击功能
文章固定链接:http://www.dayanzai.me/dont-copy-the-page.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
全部评论: (1条)
  1. kentamrs2021-10-21 16:39 回复
    没啥用,脚本直接解了

发表评论

返回顶部