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('复制失败!')
    }
    
}
相关推荐
-SOLO-38 分钟前
Android Event 日志完全指南
android
壮哥_icon2 小时前
【Android 系统开发】从掉帧卡顿到丝滑:高频硬件中断(IRQ)的 CPU 亲和性性能优化实战
android·性能优化
千里马学框架2 小时前
Android Framework 新手学习踩坑建议指南
android·智能手机·性能优化·framework·aaos·车载开发·系统工程师
我命由我123454 小时前
执行 Gradle 指令报错,无法将“grep”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
碎碎念_4924 小时前
SpringBoot + Vue 前后端分离从 0 到 1 完整环境配置流程
vue.js·spring boot·后端
shuaijie05185 小时前
强制修改调用接口的api地址。
javascript·vue.js·ecmascript
狂奔solar5 小时前
ARMA 模型:从白噪声到万能逼近器
android
JerrySir5 小时前
恶意 npm 包只活了 17 分钟:技术面试里,为什么“升级依赖”还不算止血?
javascript·安全
渣渣灰飞5 小时前
MySQL 系统学习 第五阶段:企业级 MySQL 实战开发 第二章:RBAC 权限系统设计
android·学习·mysql
白帽小阳5 小时前
2026前端面试题!(附答案及解析)
javascript·网络·python·安全·web安全·网络安全·护网行动