请选择 进入手机版 | 继续访问电脑版

让文字无法被用户copy而去

发表于 2017-12-13 17:38 显示全部楼层 16 233

一般来讲,无论是大学生写论文还是小编写文章, 都有一个特点:天下文案一大抄。所以这部分“抄袭”群体经常会在网上直接copy,反正读书人copy不叫抄袭,是借鉴嘛~我懂。

那我们如何在页面中防止用户copy走我们的文字呢?这时候给大家两个方法,一种是js的方法,另一种是css。

先来看看css怎么实现:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
    div{user-select: none;}
</style>
</head>
<body>
    <div>你是我的小苹果</div>
</body>
</html>

这段代码让div中的文字彻底无法被选中,而且连鼠标移上文字时,都不会出现光标。

再来看看js怎么实现:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>你是我的小苹果</div>
</body>
</html>
<script>
document.getElementsByTagName("div")[0].onselectstart = function(){
	return false;
}
</script>

这段代码实现了让div的文字无法被选中,但鼠标移上文字,仍然会有光标。

你以为事情到此结束了吗?

错了,假如你用的不是div,而是input,那么你会发现以上这两种方法对input中的文字的禁止选中操作都是无效的。

那么,该怎么处理呢?

首先要区分浏览器,如果是火狐浏览器,那么只要加上前缀即可:

input{-moz-user-select:none;user-select:none;}

但给这个属性加上-webkit-,在谷歌也是无效的。另外,无论是谷歌和火狐,或是IE,使用onselectstart方法皆不能作用于input和textarea身上。

那么现在就有点乱了,又跟浏览器相关,又跟css与js相关,这样吧,我们总结一下各个浏览器下有什么方法阻止用户选中文本:

一、非input与textarea的标签

1、IE

针对ie6-9的浏览器,css的方法完全无效,可以使用js的方法代替;

2、chrome & safari

支持css写法;

3、firefox

支持,建议加上前缀-moz-;

4、opera

不支持,可以使用js的方法代替。

二、input与textarea标签

首先,如果使用了表单标签,那么使用user-select:none;在移动端会导致input无法被输入,这样的用户体验不好,所以不建议使用这个属性。

如果非要禁用,那么可以添加前缀:

input{
    -moz-user-select:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

但目前最新版的谷歌与火狐已经无效,所以总的来讲,不建议给input和textarea添加这种操作。

回复 使用道具
举报
佳木繁玥

发表于 04-19 10:00 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
踮脚怪

发表于 04-15 06:08 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
孵梦Reve

发表于 04-08 04:19 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
hello_world

发表于 03-27 16:59 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
张比亚

发表于 02-25 08:15 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
正怒月神

发表于 02-21 15:24 显示全部楼层

回复 支持 反对 使用道具
举报
biubiuamy

发表于 02-17 03:40 显示全部楼层

回复 支持 反对 使用道具
举报
目定口呆

发表于 01-24 07:25 显示全部楼层

观后纵想法再多,也不如一句回复实在!

回复 支持 反对 使用道具
举报
周牧

发表于 01-13 19:12 显示全部楼层

好文章,必须帮顶!!!

回复 支持 反对 使用道具
举报
12下一页

发表新文章
赵文贤老师

小码哥名师团队

1

学分

1029

学币

1156

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1156

小码哥一周年勋章前100注册用户勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育