H5点击复制功能 兼容安卓、IOS

news2024/10/6 4:13:23

效果图

在这里插入图片描述

HTML代码

<div>链接:
	<span style="color: #FF8A21" @click="CopyUrl" id="copyId"> https://blog.csdn.net/qq_51463650?spm=1000.2115.3001.5343</span>
</div>

复制方法

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('复制失败!')
    }
    
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1626388.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git工具的使用

文章目录 Git概述本地仓库命令远程仓库命令分支操作标签操作 IDEA上执行Git Git概述 一般工作流程如下&#xff1a; 从远程仓库中克隆 Git 资源作为本地仓库&#xff1b; 从本地仓库中checkout代码然后进行代码修改&#xff1b; 在提交本地仓库前先将代码提交到暂存区&#xff…

利用Spring Boot后端与Vue前端技术构建现代化电商平台

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

python基础——正则表达式

&#x1f4dd;前言&#xff1a; 这篇文章主要想讲解一下python中的正则表达式&#xff1a; 1&#xff0c;什么是正则表达式 2&#xff0c;re模块三匹配 3&#xff0c;元字符匹配 4&#xff0c;具体示例 &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;个人专栏&am…

【C++】STL-vector的使用

目录 1、什么是vector&#xff1f; 2、vector的使用 2.1 vector的定义 ​编辑 2.2 遍历修改数据 2.3 迭代器 2.4 vector空间增长问题 2.5 vector的增删查改 3、迭代器失效 3.1 会引起其底层空间改变的操作&#xff0c;都有可能是迭代器失效 3.2 指定位置元素的删除操…

【Linux】如何进行用户之间的切换——指令su

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

消费新纪元:揭秘消费增值模式,让你的每一分钱都“钱生钱”

你是否对传统消费方式有所不满&#xff0c;认为它只停留在物质层面的交换&#xff0c;缺乏更深层次的附加价值&#xff1f;那么&#xff0c;我要为你揭晓一种新颖的消费模式——消费增值&#xff0c;它将为你的消费观念带来全新的变革&#xff0c;让你的每一笔消费都充满无限可…

CLIP图生文

CLIP模型本身并不是图生文的&#xff0c;CLIP模型用来做图片和文本描述的匹配。 但它可以与其他技术结合使用来实现这一点&#xff0c;以下是两种常见的方法&#xff1a; CLIP作为文本灵感检索系统&#xff1a; 这种方法利用了 CLIP 在寻找图像和文本之间相似表示方面的优势。…

关于豆瓣电影数据抓取以及可视化

首先我们可以先了解以下网络爬虫的定义&#xff1a; 爬虫是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。它可以在互联网上自动抓取网页内容&#xff0c;将这些信息存储起来。爬虫可以抓取网站的所有网页&#xff0c;从而获取对于我们有价值的信…

跨界客户服务:拓展服务边界,创造更多价值

在日益激烈的市场竞争中&#xff0c;企业如何突破传统服务模式的限制&#xff0c;创造更多价值&#xff0c;已成为业界关注的焦点。跨界客户服务作为一种新兴服务模式&#xff0c;正逐渐受到企业的青睐。通过跨界合作&#xff0c;企业可以拓展服务边界&#xff0c;提供更加多元…

数据治理和数据管理 傻傻分不清楚?

互联网时代&#xff0c;数据&#xff0c;这一无形资产&#xff0c;已成为现代企业的核心竞争力。如何高效地管理和利用数据&#xff0c;成为企业关注的焦点。在这个过程中&#xff0c;数据治理&#xff08;Data Governance&#xff09;和数据管理&#xff08;Data Management&a…

[SpringBoot] JWT令牌——登录校验

JWT&#xff08;JSON Web Token&#xff09;是一种用于在网络应用之间传递信息的开放标准&#xff08;RFC 7519&#xff09;。它由三部分组成&#xff1a;头部&#xff08;header&#xff09;、载荷&#xff08;payload&#xff09;和签名&#xff08;signature&#xff09;。J…

android 去除桌面谷歌搜索框

注&#xff1a; 本文只是博主学习记录分享&#xff0c;仅供参考。如有错误请指出来&#xff0c;谢谢&#xff01; 一、问题描述 去除 android 系统桌面谷歌搜索栏&#xff0c;前后对比如下图&#xff1a; 系统版本&#xff1a;android12 平台&#xff1a;rk3568 二、…

DNS域名系统 | unbound

目录 DNS 命名空间和域名结构 DNS的命名空间的结构: 域名服务器的分类&#xff1a; ​编辑 DNS 资源记录 常见type: DNS报文结构 请求报文&#xff1a; 响应报文&#xff1a; 解析类型 递归查询 迭代查询 DNS劫持 DNS劫持方法&#xff1a; 防御措施 DNS服务部署…

【Java EE】 文件IO的使用以及流操作

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

C++:const成员和取地址操作符

目录 一、const成员 二、取地址及const取地址操作符重载 一、const成员 将const修饰的“成员函数”称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数 隐含的this指针&#xff0c;表明在该成员函数中不能对类的任何成员进行修改。 注&…

【JAVA】PO、VO、DAO、BO、DTO、POJO你分得清吗?

在Java开发中&#xff0c;PO、VO、DAO、BO、DTO、POJO这些词汇是比较常见的&#xff0c;每个术语都有其特定的含义和用途。下面是它们的具体区别&#xff1a; 名称简要概况用途和特定PO (Persistence Object) 持…

PDF 书签制作与调整 从可编辑、不可编辑 PDF 文档创建书签的方法

本文是对以前发表的旧文拆分&#xff0c;因为原文主题太多&#xff0c;过长&#xff0c;特另起一篇分述。 第一部分 由可编辑 PDF 文档创建书签 方法 1. Adobe Acrobat Pro autobookmark AutoBookmark 是一个可用于 Adobe Acrobat 自动生成书签的插件。 官方下载地址&…

手拉手安装Kafka2.13发送和消费消息

Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。 Kafka启动方式有Zookeeper和Kraft&#xff0c;两种方式只能选择其中一种启动&#xff0c;不能同时使用。 Kafka下载https://downloads.apache.org/kafka/3.7.0/kafka_2.…

静态链接lib库使用

lib库实际上分为两种&#xff0c;一种是静态链接lib库或者叫做静态lib库&#xff0c;另一种叫做动态链接库dll库的lib导入库或称为lib导入库。这两个库是不一样的&#xff0c;很多人都分不清楚&#xff0c;很容易混淆。 第一种是静态lib&#xff0c;包含了所有的代码实现的&am…

回归预测 | Matlab实现SSA-ESN基于麻雀搜索算法优化回声状态网络的多输入单输出回归预测

回归预测 | Matlab实现SSA-ESN基于麻雀搜索算法优化回声状态网络的多输入单输出回归预测 目录 回归预测 | Matlab实现SSA-ESN基于麻雀搜索算法优化回声状态网络的多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现SSA-ESN基于麻雀搜索算法…