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('复制失败!')
    }
    
}
相关推荐
诸神黄昏EX11 分钟前
Android Safety 系列专题【篇七:Android AVF机制】
android
千码君201612 分钟前
kotlin:jetpack compose 生成动态可控的动画
vue.js·elementui·kotlin
蓝黑202016 分钟前
Vue组件通信之slot
前端·javascript·vue
布局呆星18 分钟前
Vue3+TS 笔记:Props 与 Emits 的正确打开方式
javascript·vue.js·笔记
小李子呢021121 分钟前
前端八股7--- Vue 状态管理工具(vuex和pinia)
前端·javascript·vue.js
Geoking.24 分钟前
后端Long型数据传到前端js后精度丢失的问题(前后端传输踩坑指南)
java·前端·javascript·后端
时寒的笔记25 分钟前
js7逆向案例_禁止f12打开&sojson打开
开发语言·javascript·ecmascript
stpzhf27 分钟前
uniapp nvue组件多个text在一行并且高亮其中一些文字
前端·javascript·uni-app
Fᴏʀ ʏ꯭ᴏ꯭ᴜ꯭.32 分钟前
MySQL 主从架构中的使用技巧及优化
android·mysql·架构
羊小蜜.32 分钟前
Mysql 11: 存储过程全解——从创建到使用
android·数据库·mysql·存储过程