H5点击复制功能 兼容安卓、IOS

效果图

HTML代码

html 复制代码
<div>链接:
	<span style="color: #FF8A21" @click="CopyUrl" id="copyId"> https://blog.csdn.net/qq_51463650?spm=1000.2115.3001.5343</span>
</div>

复制方法

js 复制代码
const CopyUrl = () => {
    let url = "https://blog.csdn.net/qq_51463650?spm=1000.2115.3001.5343";
    if (!url) return showToast('复制失败!')

    let copyDom = document.getElementById('copyId')
    copyDom.innerText = url

    //创建选中范围
    let range = document.createRange()
    range.selectNode(copyDom)
    //移除剪切板中内容
    window.getSelection().removeAllRanges()
    //添加新的内容到剪切板
    window.getSelection().addRange(range)
    //复制
    let successful = document.execCommand('copy')
    if (successful) {
        showToast('复制成功!')
    } else {
        showToast('复制失败!')
    }
    
}
相关推荐
笨笨狗吞噬者15 小时前
【uniapp】小程序实现自由控制组件JSON文件配置
vue.js·微信小程序·vite
2501_9159090615 小时前
iOS APP 抓包全流程解析,HTTPS 调试、网络协议分析与多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview
龙国浪子15 小时前
小说写作软件中的文本高亮功能:基于 TipTap 的多彩标记技术实现
vue.js·electron
慧慧吖@15 小时前
Zustand
开发语言·javascript·ecmascript
2***B44916 小时前
JavaScript语音识别案例
开发语言·javascript·语音识别
是你的小橘呀16 小时前
JavaScript 原型链解密:原来 proto 和 prototype 这么好懂
前端·javascript·前端框架
ohyeah16 小时前
使用 LocalStorage 实现本地待办事项(To-Do)列表
前端·javascript
Jing_Rainbow16 小时前
【前端三剑客-6/Lesson11(2025-10-28)构建现代响应式网页:从 HTML 到 CSS 弹性布局再到 JavaScript 交互的完整指南 🌈
前端·javascript
6***379416 小时前
JavaScript虚拟现实开发
开发语言·javascript·vr
Propeller16 小时前
【Android】快速上手 Android 组件化开发
android·架构