uniapp 之 复制文本内容(兼app+h5)




  在实际项目开发中,我们经常能够遇到复制文本内容的需求,下面就让我们来看下复制文本如何实现:

第一种方式:

  利用uniapp 的 text 组件的 selectable属性,使 text 组件包裹的文本内容可选,但是这种方法有一定的局限线,就是当用户长按的时候选中的是当前的词且不能拖拽移动增加选中内容,而不是选中 text 组件包裹的所有文本内容;

<text selectable="true">
	这是一个可以长按选择文本,弹出复制的text标签
</text>


如图:
在这里插入图片描述
那么如何能够做到直接复制整个组件包裹的文本内容呢?



第二种方式:
在这里插入图片描述

  利用 uniapp 提供的 api setClipboardData,但是这个 api 兼容 APP 端,不兼容 H5 端,那么我们还需要对 H5 端进行处理;

代码如下:

<view @tap="getDetail(info)">
	{{info}}
</view>


getDetail(info) {
	uni.showModal({
	    content: info,//模板中提示的内容
	    confirmText:'复制内容',
	    success:(res) => {//点击复制内容的后调函数
			if(res.confirm) {
				let result
				// #ifndef H5
				//uni.setClipboardData方法就是讲内容复制到粘贴板
				uni.setClipboardData({
					data: info,//要被复制的内容
					success:() => {//复制成功的回调函数
						uni.showToast({//提示
							title:'复制成功' 
						})
					}
				});
				// #endif
				
				 // #ifdef H5 
					let textarea = document.createElement("textarea")
					textarea.value = info
					textarea.readOnly = "readOnly"
					document.body.appendChild(textarea)
					textarea.select() // 选中文本内容
					textarea.setSelectionRange(0, info.length) 
					uni.showToast({//提示
						title:'复制成功' 
					})
					result = document.execCommand("copy") 
					textarea.remove()    
				// #endif
			} else {
				console.log('取消')
			}
	    }
	});
}

效果:

在这里插入图片描述




至此,本文到此结束,如有不足,望大家多多指点! 谢谢!

  • 9
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

zhuangv

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

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

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

打赏作者

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

抵扣说明:

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

余额充值