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('复制失败!')
    }
    
}
相关推荐
阿正的梦工坊9 小时前
React:构建用户界面的JavaScript库
javascript·react.js·ui
行走的陀螺仪9 小时前
[特殊字符] JavaScript 设计模式完全指南:从入门到精通(含20种模式)
开发语言·javascript·设计模式
plainGeekDev9 小时前
Android 专家岗 Kotlin 面试题:能答出这些,说明你对语言设计有自己的理解
android·kotlin
plainGeekDev9 小时前
Android 资深岗 Kotlin 面试题:只会用协程不够,你得懂它为什么这么设计
android·kotlin
StarShip9 小时前
第一阶段:应用层视图绘制
android
KnowWhere9 小时前
Vue3 调试技巧:一键挂载组件实例到 Window(仅开发环境生效)
vue.js
StarShip9 小时前
第二阶段:RenderThread 渲染处理
android
胡萝卜术9 小时前
《JavaScript 语言精粹》第三章精读:对象——最基础也最容易被误解的基石
javascript
通玄10 小时前
Jetpack Compose 入门系列(一):从零搭建到基础控件使用
android