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

本文介绍了一种在H5页面中实现文字复制功能的方法,利用clipboardjs插件,通过简单的几步即可让页面元素具备复制能力。文章详细展示了如何安装、引入及使用该插件,并提到了兼容性问题及其解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

但是也会出现这种需求。 

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

 

 

这里给大家推荐一个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;

 

 

以上   真香~~~

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋哈哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值