clipboard.js移动端无法实现复制

clipboard.js简介：实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

在项目中使用clipboard.js插件去实现点击按钮，复制文字到剪切板的功能。同样的代码，在PC可以实现正常复制但是在移动端却失效

主要是因为移动端项目为了防止用户长按文本实现复制，一般在重置reset.css里面都会设置

div, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6, span {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

所以为了使需要被复制的文本所在的div能够选中，可以设置css属性user-select:auto，不过，这样做的缺点是，用户长按该区域也能实现复制。

还有一种解决方式就是通过js去获取需要复制的内容在，这种写法也是官方文档提供的，为了使我们可以动态的设置用户剪贴板的内容 https://clipboardjs.com/

this.clip = new ClipboardJS('.copy-btn', {
    text: () => myInvitedCode ? myInvitedCode : ''  //设置text的值，即为需要复制到用户剪贴板的内容
});

对应的HTML：

<div className="invite-code">
    {
        myInvitedCode ? myInvitedCode : ''
    }
</div>
<button className="copy-btn" data-clipboard-target=".invite-code">{UPEX.lang.template('复制')}</button>

还有需要注意的是，用户点击的部分需要用button标签，我一开始用的div，浏览器调试的时候可以点击，但是在手机上调试时不能实现复制

来源：CSDN

作者：yujin0213

链接：https://blog.csdn.net/yujin0213/article/details/83304781

标签

移动互联网终端