移动端H5不能自由选中文本进行复制的问题

Boale_H

已于 2023-04-28 18:23:36 修改

阅读量2.2k

点赞数

分类专栏：项目中碰到的一些bug和特殊情况文章标签：前端 javascript html css

于 2023-03-15 16:58:11 首次发布

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

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

版权

项目中碰到的一些bug和特殊情况专栏收录该内容

42 篇文章 3 订阅

订阅专栏

移动端H5不能自由选中文本进行复制的问题

前言

在写微信公众号H5的时候，发现在移动端上，H5没办法自由选中文本进行文字复制。这实际上是由于微信浏览器和其他的移动端浏览器默认给元素添加了user-select: none;属性造成的。既然知道是这个原因造成的，那么我们通过修改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: all;即可放开限制，让H5的文本能够自由选中文字复制。但是我们也需要注意兼容性问题。

user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
-ms-user-select: all;

Boale_H

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
移动端H5不能自由选中文本进行复制的问题

在写微信公众号H5的时候，发现在移动端上，H5没办法自由选中文本进行文字复制。这实际上是由于微信浏览器和其他的移动端浏览器默认给元素添加了属性造成的。既然知道是这个原因造成的，那么我们通过修改属性即可解决问题user-select有none、auto、text、contain、all、inherit、initial、unset8个属性//不可选中 user-select : auto;//自动 user-select : text;//文本可选中 user-select : contain;
复制链接

扫一扫

专栏目录