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('复制失败!')
    }
    
}
相关推荐
之歆7 分钟前
Day02_ES6+ 核心特性深度解析:现代 JavaScript 开发的基石
前端·javascript·es6
问心无愧05138 分钟前
ctf show web入门71
android·前端·笔记
夜勤月25 分钟前
AQS 与 ThreadPoolExecutor 深度拆解:JDK 高并发底层设计精髓
android·java·开发语言
小KK_36 分钟前
新手必看篇——JS类型判断
前端·javascript
小妖66638 分钟前
console.log 显示内容不全怎么办
javascript·js·console.log
喵个咪1 小时前
基于 Nuxt 4 的现代 Headless CMS 前端:架构深度解析与二次开发指南
前端·vue.js·nuxt.js
AI科技星1 小时前
万有引力G与真空介电常数ε0全维度完整关系式汇编(基于v=c螺旋时空理论)
c语言·开发语言·前端·javascript·网络·汇编·electron
didadida2621 小时前
第二回: Session Assistant 工具链的三节点设计
javascript·agent
Yeyu1 小时前
Android 卡顿诊断 SDK:从痛点出发的设计思考
android
云间寄信1 小时前
异步编程与事件循环
javascript