• 欢迎访问风色博客,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入风色群 QQ群
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏风色博客吧

网页上如何实现禁止复制粘贴以及如何解除

分类三 fengse 2个月前 (07-24) 60次浏览 已收录 0个评论

我们首先来介绍如何实现禁止复制,知道了禁止的方式,再解除就容易了。

实现禁止复制粘贴

比较简单,直接上代码:

<style type="text/css">
/* 最简单的实现禁止复制的方法,采用css方式禁止文字选择,当然这只兼容webkit内核浏览器 */
* { -webkit-user-select: none; }
p {font-family: 'Microsoft Yahei';font-size: 28px;}
input {width: 80%; padding: 10px 20px;}
</style>
<h1>本代码在UC手机浏览器上不生效,其它手机浏览器暂未发现问题、PC全部没问题。</h1>
<p>这是一段示例文字,我无法被选中,也无法按下鼠标右键,即使被选中你也无法复制!</p>
<input type="text" value="文本框中的文字可以选中,但是无法复制粘贴"/>
<script type="text/javascript">
// 禁止右键菜单
document.oncontextmenu = function(){ return false; };
// 禁止文字选择
document.onselectstart = function(){ return false; };
// 禁止复制
document.oncopy = function(){ return false; };
// 禁止剪切
document.oncut = function(){ return false; };
// 禁止粘贴
document.onpaste = function(){ return false; };
</script>

解除禁止复制粘贴

知道如何禁止了,那解除这个限制就容易多了。

首先,绝大部分限制都是采用 js 实现的,那我直接禁用 js 不就 OK 了么?哈哈,突然发现我太聪明了!假如你使用的是 Chrome 或者其它国产 webkit 内核浏览器,按下 F12 弹出开发者工具,再按下 F1 弹出设置,勾选 Disable JavaScript,再按下 ESC 键关闭设置(其它浏览器如何禁止 JavaScript 请自行研究),然后试试是不是可以复制了?

网页上如何实现禁止复制粘贴以及如何解除

如果此时仍无法选择文字,找到你要复制文字的地方,看看是不是添加了 -webkit-user-select: none 的样式,如果有,将其去掉即可:

网页上如何实现禁止复制粘贴以及如何解除
到了这里应该就可以自由复制粘贴了,复制完了记得把禁用 JavaScript 的地方还原回来哦。


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:网页上如何实现禁止复制粘贴以及如何解除
支付宝扫码打赏 微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏本站

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址