前端禁止复制页面上的文字内容

Boale_H

已于 2023-03-15 17:40:06 修改

阅读量1.7k

点赞数

分类专栏：项目中实现的一些业务需求文章标签：前端 css

于 2021-11-30 19:20:24 首次发布

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/Boale_H/article/details/121640384

版权

项目中实现的一些业务需求专栏收录该内容

40 篇文章 3 订阅

订阅专栏

前端禁止复制页面上的文字内容

前言

有些时候为了保护版权问题，需设置禁止用户去复制页面中的文字，那么我们可以通过user-select属性去实现

user-select介绍以及兼容性

user-select有none、auto、text、contain、all、inherit、initial、unset8个属性

/* Keyword values */
user-select: none; //不可选中
user-select: auto; //自动
user-select: text; //文本可选中
user-select: contain; // 允许在元素内选择；但是，选区将被限制在该元素的边界之内。
user-select: all; //在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。

/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Doesn't work in Safari; use only  "none" or "text", or else it willallow typing in the <html> container */

/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

-moz-     /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o-       /* Opera浏览器(早期) */
-ms-      /* Internet Explorer (不一定) */

解决办法

通过设置user-select: none;即可限制，让H5的文本无法选中文字复制。但是我们也需要注意兼容性问题。

body {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  -o-user-select:none;
  user-select: none;
}