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('复制失败!')
    }
    
}
相关推荐
Bug从此不上门4 分钟前
【无标题】
前端·javascript·uni-app·vue
程序猿ZhangSir18 分钟前
Vue3 项目的基本架构解读
前端·javascript·vue.js
Mintopia43 分钟前
当数字橡皮泥遇上魔法:探秘计算机图形学的细分曲面
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 物理引擎:给你的 3D 世界装上 “牛顿之魂”
前端·javascript·three.js
亲亲小宝宝鸭1 小时前
写了两个小需求,终于搞清楚了表格合并
前端·vue.js
BUG收容所所长1 小时前
栈的奇妙世界:从冰棒到算法的华丽转身
前端·javascript·算法
令狐寻欢1 小时前
JavaScript中常用的设计模式
javascript
xingba1 小时前
重写IE的showModalDialog模态框以兼容现代浏览器
前端·javascript·google
梨子同志1 小时前
JavaScript Set 和 Map 数据结构
前端·javascript
令狐寻欢1 小时前
JavaScript中常用的数据结构与算法
javascript