H5前端自动复制,JS自动绑定复制,JS复制到剪贴板。

H5前端js中自动复制功能:简单说下就是点击一个按钮触发事件,然后PC页面或者手机上的快捷粘贴都会被绑定复制值

万变不离其中,我还是喜欢用原生的方法document.execCommand('copy')。网上也有些第三方js封装了这个方法属性,但是浏览器会有兼容问题

 

先从html开始吧,如下:

        <label id="cSharingLinks" style="opacity:0;position: absolute;z-index:-999" >123</label>
        <input type="button" value="复制" class="btnCopySharingLinks" />

第一个label标签用来存需要绑定复制的值。

注意:我之前用的input 的文本框,然后复制后粘贴出来会有2个换行,我是琢磨了半天去不掉,然后换label就收工了。

      这个标签不能用这些方法隐藏( jquery.hide()、display:none ) ,不然Copy失败。但是加了些样式给他变透明、漂移、置底 差不多也是个隐藏就行了。

第二个input按钮主要用来触发事件,

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值