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('复制失败!')
    }
    
}
相关推荐
We་ct17 分钟前
LeetCode 300. 最长递增子序列:两种解法从入门到优化
开发语言·前端·javascript·算法·leetcode·typescript
xiangxiongfly9151 小时前
Android 使用WebSocket通信
android·websocket·网络协议·okhttp
su_ym81101 小时前
Android属性系统
android·framework·property
明天就是Friday1 小时前
Android实战项目③ Room+Clean Architecture开发待办事项App 完整源码详解
android
没有了遇见1 小时前
《彻底搞懂 ViewModel:作用、原理与源码分析》
android
Fate_I_C2 小时前
Kotlin 协程:串行/并行请求、async/await、coroutineScope 管理并发、重试机制
android·代码规范
踩着两条虫2 小时前
VTJ.PRO 新手入门:从环境搭建到 AI 生成首个 Vue3 应用
前端·javascript·数据库·vue.js·人工智能·低代码
他是龙5512 小时前
63:JS 加密断点调试与逆向实战
开发语言·javascript·状态模式
山河梧念2 小时前
【保姆级教程】VMware虚拟机安装全流程
android·java·数据库
常利兵2 小时前
Kotlin类型魔法:Any、Unit、Nothing 深度探秘
android·开发语言·kotlin