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

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

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

先从html开始吧,以下:jquery

123

浏览器

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

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

这个标签不能用这些方法隐藏( jquery.hide()、display:none ) ,否则Copy失败。可是加了些样式给他变透明、漂移、置底 差很少也是个隐藏就好了。spa

第二个input按钮主要用来触发事件,随便你用啥,只要你能触发事件就行(我用标签的class经过juqery绑定了click方法)。htm

再是js代码,以下:对象

$("#cSharingLinks").html("须要复制的值");  //为标签写入须要复制的值。注意:在Vue.Js中这步须要放在Created或者methods中,否则赋值顺序会有问题。

$(".btnCopySharingLinks").click(function () {事件

var copyDom= document.getElementById('cSharingLinks');  //原生js根据Id获取到Dom对象。

var range = document.createRange();  //建立一个range对象。

range.selectNode(copyDom);  //选择整个节点,包括子节点。

window.getSelection().removeAllRanges();  //移除选中内容。

window.getSelection().addRange(range);  //添加选中内容。

document.execCommand('copy');  //执行自动复制。

window.getSelection().removeAllRanges();  //删除全部选中内容。

});

最后,若是是一次性的能够经过 如下2个方法,解除对范围的引用,从而让垃圾回收机制回收其内存。可是一旦分离了就无法再使用了。

range.detach(); /从文档中分离

range = null; //解除引用

以上都是我的陋闻,若有问题有劳指正,你们共同窗习共同进步。若是有帮助到您,但愿您能给动个小手点一下右下方的推荐,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现这个功能需要使用到以下技术: 1. 长按事件:使用touchstart和touchend事件来判断长按事件的触发。 2. 复制文本:使用document.execCommand('copy')方法复制文本到剪贴板。 3. 转发图片:使用canvas将图片转换为base64格式,然后利用微信JS-SDK的接口实现图片的转发。 下面是一个简单的实现示例: HTML代码: ``` <div id="content"> <p>可复制的文本</p> <img src="图片地址"> </div> ``` JavaScript代码: ``` var isPress = false; var timer = null; // 长按事件 $('#content').on('touchstart', function() { clearTimeout(timer); timer = setTimeout(function() { isPress = true; // 判断是否是文本或图片 if (window.getSelection().toString() !== '') { // 复制文本 document.execCommand('copy'); alert('文本已复制剪贴板'); } else if ($('#content img').length > 0) { // 转发图片 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = $('#content img').attr('src'); img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); var base64 = canvas.toDataURL('image/jpeg'); wx.ready(function() { // 调用微信JS-SDK的接口实现图片的转发 wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: base64, success: function() { alert('图片已分享成功'); } }); }); }; } }, 500); }); $('#content').on('touchend', function() { clearTimeout(timer); if (!isPress) { // 点击事件 } isPress = false; }); ``` 需要注意的是,转发图片需要在微信环境下才能正常使用微信JS-SDK的接口,所以需要在微信浏览器中进行测试。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值