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('复制失败!')
    }
    
}
相关推荐
hawk2014bj11 分钟前
Ubuntu 安装 MySQL
android·mysql·ubuntu
_小马快跑_2 小时前
Android 图像合成:玩转 PorterDuff.Mode 的 18 种混合模式
android
_小马快跑_2 小时前
Android | 多种方式实现图片圆角矩形和圆形效果(续)
android
_小马快跑_2 小时前
MaterialShapeDrawable vs CardView:两种方式实现阴影效果对比
android
程序猿John3 小时前
ES6 新增特性 箭头函数
前端·javascript·es6
_小马快跑_3 小时前
玩转ShapeableImageView:实现灵活的自定义形状与边框效果
android
@大迁世界4 小时前
彻底改变我 React 开发方式的组件模式
前端·javascript·react.js·前端框架·ecmascript
菜鸟xiaowang4 小时前
Android 使用ninja加速编译的方法
android
William Dawson4 小时前
【Vue 3 + Element Plus 实现产品标签的动态添加、删除与回显】
前端·javascript·vue.js
拉不动的猪5 小时前
项目基础搭建时的一些基本注意点
前端·javascript·面试