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>uniapp实现长按内容复制需求：
第一种方式：点击按钮复制到剪切板
<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>h5
效果展示
所需js：
引用jquery.js 和 clipboard.min.js
jQuery就不用多说了，而clipboard.min.js 是一个 JavaScript 库，用于实现网页上的复制到剪贴板功能。它提供了一种简单的方式来处理复制操作，无需使用浏览器原生的复制命令或手动选中文本并右键复制
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<title>点击复制微信号并自动打开微信应用</title>
</head>
<body>
<span id="target">微信号123132</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
点击复制
</button>
</body>
<script>
$(document).ready(function(){
var clipboard = new Clipboard('#copy_btn');
clipboard.on('success', function(e) {
alert("微信号复制成功",1500);
window.location.href='weixin://';
e.clearSelection();
console.log(e.clearSelection);
});
});
</script>
</html>
代码注解：
e.clearSelection() ：清除用户选择的文本
data-clipboard-action="copy"：指定了复制操作的类型为 "copy"，表示点击按钮时将执行复制操作。
data-clipboard-target="#target"：指定了要复制的目标元素的选择器，该选择器为 #target，表示要复制具有 id="target" 的元素的文本内容。
协议注解：URL Scheme
URL Scheme，是Android，Scheme是一种页面内跳转协议
简单的说，URL Scheme就是一个可以让app相互之间可以跳转的协议。每个app的URL Scheme都是不一样的文章来源：https://www.toymoban.com/news/detail-734156.html
要在浏览器中打开淘宝和知乎等应用程序，可以使用类似的方法：文章来源地址https://www.toymoban.com/news/detail-734156.html
//打开淘宝
window.location.href = 'taobao://';//打开知乎
window.location.href = 'zhihu://';到了这里，关于【uniapp开发小程序】实现读取手机剪切板，实现长按内容复制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
