H5复制内容到剪切板

1、execCommand方法

document.execCommand(‘copy’, true);

clipboardCopy(content){
	let copyDom = document.createElement('div')
	copyDom.innerText = content
	copyDom.style.position = 'absolute'
	copyDom.style.top='0px'
	copyDom.style.right='-9999px'
	document.body.appendChild(copyDom)
	//创建选中范围
	let range = document.createRange()
	range.selectNode(copyDom)
	//移除剪切板中内容
	window.getSelection().removeAllRanges()
	//添加新的内容到剪切板
	window.getSelection().addRange(range)
	//复制
	let successful = document.execCommand('copy')
	copyDom.parentNode.removeChild(copyDom)
	if(successful){
		Toast.info('复制成功')  
	}else{
		this.switchWxDialog = true
	}
}

此语法已被废弃
在这里插入图片描述

2、Clipboard API

if (navigator.clipboard) {
     console.log('navigator.clipboard')
     navigator.clipboard.writeText(content).then(()=>{
     	Toast.info('复制成功')
    })
}

使用这个API 需要用户进行相应授权,
参考大佬文章: JS复制文字到剪切板的极简实现及扩展,Clipboard API无需浏览器权限申请;但是实际使用时发现 在移动端部分设备不会自动授权,没有授权调用方法会报错。最终舍弃此方式
在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值