【uniapp开发小程序】实现读取手机剪切板,实现长按内容复制

实现读取手机剪切板需求

效果图:

完整代码: 

<template>
	<view class="">
		<text>测试</text>
		<view @click="pasteContent()" class="content">
			点击此处可快速识别 您的收货信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressData: {
					name: '',
					phone: '',
					details: '', //详细地址
				},
			}
		},
		methods: {
			//获取到剪切板的内容,快速识别收货地址
			pasteContent() {
				var that = this
				// 获取系统剪贴板内容
				uni.getClipboardData({
					success: (res) => {
						
						const text = res.data;
						const phoneNumber = this.extractPhoneNumber(text);
						const name = this.extractName(text, phoneNumber);
						const address = this.extractAddress(text, phoneNumber);

						// 去除特殊字符和前缀标识
						const cleanedName = this.cleanText(name);
						const cleanedPhoneNumber = this.cleanText(phoneNumber);
						const cleanedAddress = this.cleanText(address);

						// 在这里可以对姓名、手机号和收货地址进行处理
						// 例如,将提取到的信息填充到表单中

						console.log('姓名:', cleanedName);
						console.log('手机号:', cleanedPhoneNumber);
						console.log('收货地址:', cleanedAddress);
						if (cleanedName != '') {
							that.addressData.name = cleanedName
						}
						if (cleanedPhoneNumber != '') {
							that.addressData.phone = cleanedPhoneNumber
						}
						if (cleanedAddress != '') {
							that.addressData.details = cleanedAddress
						}
					}
				});
			},
			//1姓名 通过正则找到电话
			extractPhoneNumber(text) {
				const reg = /\d{11}/;
				const match = text.match(reg);
				const phoneNumber = match ? match[0] : '';
				return phoneNumber;
			},
			//2手机号 截取0到电话第一次出现的位置
			extractName(text, phoneNumber) {
				const index = text.indexOf(phoneNumber);
				const name = index > 0 ? text.substring(0, index).trim() : '';
				return name;
			},
			//3地址 从电话第一次出现的位置+电话长度开始截取
			extractAddress(text, phoneNumber) {
				const index = text.indexOf(phoneNumber);
				const address = index > 0 ? text.substring(index + phoneNumber.length).trim() : '';
				return address;
			},
			// 4去除特殊字符和前缀标识
			cleanText(text) {
				const cleanedText = text.replace(/\/|姓名:|手机号:|收货地址:|详细地址:/g, '');
				return cleanedText;
			},

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: white;
		height: 120rpx;
		text-align: center;
	}
</style>

实现长按内容复制需求:

 第一种方式:点击按钮复制到剪切板

<template>
	<view class="">
		<text>测试赋值文字</text>
		<text>{
   
   {cloneText}}</text>
		<button @click="cloneClick">点击复制</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cloneText: '我是要复制的内容、我是要复制的内容、我是要复制的内容'
			}
		},
		methods: {
			cloneClick() {
				// 设置系统剪贴板的内容
				uni.setClipboardData({
					data: this.cloneText,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			}
		}
	}
</script>

ps:多次点击也只会复制一次 

第二种方式:长按内容复制到剪切板

<template>
	<view class="">
		<text>长按复制</text>
		<!-- longpress如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。 -->
		<text @longpress='copyText'>{
   
   {cloneText}}</text>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cloneText: 'v我50看看实力、v我50看看实力、v我50看看实力'
			}
		},
		methods: {
			copyText() {
				uni.setClipboardData({
					data: this.cloneText,
					success() {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'none',
						})
					}
				})
			}
		}
	}
</script>

猜你喜欢

转载自blog.csdn.net/weixin_52479803/article/details/131597928