js实现禁用文本的几种方式

为什么写这篇文章呢, 前两天产品卢哥发了我一个网页, 问问我这个网页内容能否复制一下, 我拿到手看了看, 首先选中需要复制的元素, 打开事件监听器, 看看是不是阻止了copy事件, 没有看到, 随后问了我们公司前端最牛皮的伟哥, 伟哥说看看是不是设置了user-select, 果真是, 所以, get到一个知识点, 给大家分享一下

今晚回来,静下心梳理了一下, 我们平常在网页中一般会滑动选中随后cv复制粘贴, 或者是右击复制,懂点html的可能会打开控制台, 点击元素进行赋值, 或者f12+f1禁用js

所以, 我们针对以上用户场景, 反向阻止用户复制

首先, 我们先说一下伟哥提到的user-select属性

打开w3c文档, 可以清晰的看到, 该属性规定了我们是否能选取元素的文本, 如果设置属性值为none, 表示防止文本选取, 如果设置了text表示文本可以被用户选取

大家可以看到, 如果什么都不设置, 文本我们是可以选择的

我们加上user-select之后, 文本就不可以复制了, 解决方法, 就是给user-select的属性值改为text, 或者将其删除即可

这样, 我们就实现了一种方式, 接下来针对用户右击点击复制?

这个怎么来实现呢, 其实可以禁用右击

我们可以给body注册一个contextmenu事件, 该事件会在用户尝试打开上下文菜单时被触发, 通常会在用户点击鼠标右键或者按下键盘的菜单键被触发, 所以我们注册该事件,就可以阻止用户右击进行复制

这样, 用户右击不显示菜单, 也是没办法点击复制

随后, 我们可以再看一个事件, 就是selectstart, 该事件可以禁用鼠标选中

和上面一样, 我们注册该事件, 并阻止默认行为

这样, 我们仍然没有办法选中文本元素, 在js中其实还有一个事件, 就是copy事件, 大家看这个英文单词, 就明白其用途了, 我们可以给元素注册copy事件, 进而阻止该事件的默认行为

这几个事件说完之后, 我们看看知道打开控制台的如何控制

比如, 可以通过F12, 或者右击检查的形式打开

鼠标右击我们上面已经说了, 那么按下键盘F12如何阻止呢?

我们可以监听键盘按下事件keydown, 来获取按下的是哪个键盘, 如果是F12, 我们就阻止其默认行为

打印之后可以看到key是F12, 所以,我们写个判断

我们点击F12, 就打不开控制台了

知道这么多事件可以阻止用户的点击, 那么面对这么多事件如何才能进行复制, 其实我们选中元素, 找到事件监听器, 将元素身上的该类事件进行移除

那么, 如果禁用了用户按F12键, 那么可以点击地址栏, 再按F12即可再次打开

今天, 我们就讲解到这里

我们明天见