移动端h5点击按钮复制指定的文本至手机的剪切板

一般在移动端页面，会禁止页面元素可选择。

但是也会出现这种需求。 

点击复制按钮   复制前边的文案。

 

 

这里给大家推荐一个js插件。传送门===》clipboardjs实现h5复制功能

使用步骤：

1. 安装   npm install clipboard --save
2. 引入 import ClipboardJS from 'clipboard' 
3. 使用 

 

    copyCode () {
      let clipboard = new ClipboardJS('.code-copy-btn')
      clipboard.on('success', (e) => {
        toast({ message: '复制成功', position: "middle" });
      })
      clipboard.on('error', (e) => {
        toast({ message: '复制失败,请手动长按复制', position: "middle" });
      })
    }

 说明：其实官网上写的也很清楚  先new 一个ClipboardJS，传一个选择器，可以是class   也可以是id

然后这个通过实例化的这个对象，绑定事件监听。成功回调和失败回调做好对应的提示。

4.这个插件是存在兼容性问题的，低版本的系统或者浏览器时不兼容的，在复制的内容的元素上  通过css设置运行长按进行复制。

对应的css代码如下：

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

 

 

以上   真香~~~