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

柔情只为你懂 2024-03-17 19:11 45阅读 0赞

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

### 使用 CSS 或 JavaScript 禁用文本选择 ###

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;This is the title of the web page&lt;/title&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&nbsp;οnmοusedοwn="return false"&nbsp;onselectstart="return false"&gt; &nbsp;&lt;div&gt; &nbsp; 博客成立于 2013 年，是独立运营的个人资源分享网站。 &nbsp; 我们在所有技术方面的专业知识每个月都有数百万的访问者。 &nbsp; 我们相信技术只有使用它的人才有用。 &nbsp; 我们的目标是为像您这样的读者提供充分利用当今技术的专业知识，并以任何人都能理解的简单术语进行解释。 &nbsp; 我们还鼓励读者以富有成效和有意义的方式使用技术。 &nbsp;&lt;/div&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;这是网页的标题&lt;/title&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&gt; &nbsp;&lt;div&gt; &nbsp;已为此文本启用文本选择。 &nbsp;&lt;/div&gt; &nbsp;&lt;div&nbsp;οnmοusedοwn="return false"&nbsp;onselectstart="return false"&gt; &nbsp;此文本禁用文本选择。 &nbsp;&lt;/div&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;这是网页的标题&lt;/title&gt; &nbsp;&lt;style&gt; &nbsp;body&nbsp;{ &nbsp;-webkit-user-select: none; &nbsp;-moz-user-select: none; &nbsp;-ms-user-select: none; &nbsp;user-select: none; &nbsp;} &nbsp;&lt;/style&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&gt; &nbsp;&lt;div&gt; &nbsp; 大博客成立于&nbsp;2013&nbsp;年，是独立运营的个人资源分享网站。 &nbsp; 我们在所有技术方面的专业知识每个月都有数百万的访问者和社交媒体上的数十万粉丝。 &nbsp; 我们相信技术只有使用它的人才有用。 &nbsp; 我们的目标是为像您这样的读者提供充分利用当今技术的专业知识，并以任何人都能理解的简单术语进行解释。 &nbsp; 我们还鼓励读者以富有成效和有意义的方式使用技术。 &nbsp;&lt;/div&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;这是网页的标题&lt;/title&gt; &nbsp;&lt;style&gt; &nbsp;.disable-text-selection&nbsp;{ &nbsp;-webkit-user-select: none; &nbsp;-moz-user-select: none; &nbsp;-ms-user-select: none; &nbsp;user-select: none; &nbsp;} &nbsp;&lt;/style&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&gt; &nbsp;&lt;div&gt; &nbsp;已为此文本启用文本选择。 &nbsp;&lt;/div&gt; &nbsp;&lt;div&nbsp;class="disable-text-selection"&gt; &nbsp;此文本禁用文本选择。 &nbsp;&lt;/div&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;这是网页的标题&lt;/title&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&gt; &nbsp;&lt;div&gt; &nbsp;对以下输入元素禁用剪切、复制和粘贴。 &nbsp;&lt;/div&gt; &nbsp;&lt;input &nbsp;type="text" &nbsp;onselectstart="return false" &nbsp;oncut="return false" &nbsp;οncοpy="return false" &nbsp;οnpaste="return false" &nbsp;οndrag="return false" &nbsp;οndrοp="return false" &nbsp;/&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;这是网页的标题&lt;/title&gt; &nbsp;&lt;script&nbsp;src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&gt; &nbsp;&lt;div&gt; &nbsp;对整个网页禁用剪切、复制和粘贴。 &nbsp;&lt;/div&gt; &nbsp;&lt;input&nbsp;type="text"&nbsp;/&gt; &nbsp;&lt;script&nbsp;type="text/javascript"&gt; &nbsp;$(document).ready(function()&nbsp;{ &nbsp;$('body').bind('cut copy paste', function(event)&nbsp;{ &nbsp;event.preventDefault(); &nbsp;}); &nbsp;}); &nbsp;&lt;/script&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;这是网页的标题&lt;/title&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&gt; &nbsp;&lt;div&gt; &nbsp;对整个网页禁用右键单击。 &nbsp;&lt;/div&gt; &nbsp;&lt;script&nbsp;type="text/javascript"&gt; &nbsp;document.oncontextmenu&nbsp;=&nbsp;new Function("return false"); &nbsp;&lt;/script&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&nbsp;lang="en"&nbsp;dir="ltr"&gt; &nbsp;&lt;head&gt; &nbsp;&lt;meta&nbsp;charset="utf-8"&gt; &nbsp;&lt;title&gt;这是网页的标题&lt;/title&gt; &nbsp;&lt;script&nbsp;src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt; &nbsp;&lt;/head&gt; &nbsp;&lt;body&gt; &nbsp;&lt;div&gt; &nbsp;对整个网页禁用右键单击。 &nbsp;&lt;/div&gt; &nbsp;&lt;script&nbsp;type="text/javascript"&gt; &nbsp;$(document).bind("contextmenu",function(e){ &nbsp;return false; &nbsp;}); &nbsp;&lt;/script&gt; &nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

### 保护您的网站免受侵害 ###

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