h5文本不能复制

最新推荐文章于 2024-05-26 00:31:34 发布

hqin_520

最新推荐文章于 2024-05-26 00:31:34 发布

阅读量1.7k

点赞数

分类专栏：笔记文章标签： html5 javascript reactjs

本文链接：https://blog.csdn.net/hqin_520/article/details/105552437

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

最近公司项目h5页面上的文字需要被复制。作为小白的我，一脸懵，页面上的文本不能复制吗？难以置信！哦，原来真的不能。所以又开始了小白的四处搜集文档路程。欢迎修改指正

首先我查看自己网页是什么原因导致页面文字不能被复制，最后发现原因是user-select: none，这个属性导致不能被复制。这个属性不是小白加上去的，是所用组件库antd mobile自己加的。至此找出为什么会产生这个现象了。接下来就该怎么解决了。

法一：直接修改user-select

这里也要考虑兼容性的问题，由图可以看出该属性支持大部分主流浏览器。在这里插入图片描述

/* 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 (不一定) */

法二：用原生js方法document.execCommand(“copy”)

这个方法网上有很多例子，主要应用原理是将文本放在文本输入框里，然后执行这个语句，就可以将其复制。下面上代码：

<div>
    <p id="MyCopyText" onDoubleClick={this.copy}>需要被复制的文本</p> /*双击复制*/
    <input style={{ position: 'absolute', top: 0, left: 0, opacity: 0, zIndex: -10 }} id="MyCopyInput" value='' />
</div>

copy() {
    let text = document.getElementById("MyCopyText").innerText;
    let input = document.getElementById("MyCopyInput");
    input.value = text; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    alert('复制成功')
}

我是使用react写的代码。但是原理就是这样。
值得注意：要想页面上不显示input，不能使用dispaly: ‘none’,也不能将input的高度或者宽度设置为0 ，因为页面上如果不存在input了，那就取不到value了。

参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select

hqin_520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5文本不能复制

最近公司项目h5页面上的文字需要被复制。作为小白的我，一脸懵，页面上的文本不能复制吗？难以置信！哦，原来真的不能。所以又开始了小白的四处搜集文档路程。欢迎修改指正首先我查看自己网页是什么原因导致页面文字不能被复制，最后发现原因是user-select: none，这个属性导致不能被复制。这个属性不是小白加上去的，是所用组件库antd mobile自己加的。至此找出为什么会产生这个现象了。接下...
复制链接

扫一扫