JS 实现一键复制文本内容

1、演示:

2、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>一键复制</title><style>.container {display: flex;justify-content: center;>button {background-color: #fff;border: 2px solid #ccc;height: 32px;border-radius: 5px;padding: 5px 15px;}>span {line-height: 32px;}}</style>
</head>
<body><div class="container"><span>如:</span><span id="text">生活如意,事业高升。</span><button id="btn" onclick="copy()">一键复制</button></div>
</body>
<script>function openMessage(value) {const msg = document.createElement('div');msg.style.height = '35px';msg.style.lineHeight = '35px';msg.style.padding = '5px 10px';msg.style.position = 'fixed';msg.style.top = '50%';msg.style.left = '50%';msg.style.transform = 'translate(-50%, -50%)';msg.style.backgroundColor = 'rgba(0, 0, 0, .3)';msg.style.textAlign = 'center';msg.style.color = 'white';msg.style.borderRadius = '15px';msg.textContent = value;document.body.appendChild(msg);setInterval(() => {document.body.removeChild(msg);}, 5000);}function copy() {const text = document.getElementById('text')const textarea = document.createElement('textarea');textarea.readOnly = 'readonly';textarea.style.position = 'absolute';textarea.style.left = '-9999px';textarea.value = text.innerText;document.body.appendChild(textarea);textarea.select();const result = document.execCommand('Copy');if (result) {// console.log('复制成功');openMessage('复制成功')} else {openMessage('操作失败')}document.body.removeChild(textarea);}
</script></html>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习---EM算法

1. 极大似然估计与EM算法 极大似然估计是一种常用的参数估计方法&#xff0c;它是以观测值出现的概率最大作为准则。关于极 大似然估计&#xff0c;假设现在已经取到样本值了&#xff0c;这表明取到这一样本的概率L(θ) 比较 大。我们自然不会考虑那些不能使样本出现的θ作为…

分治算法——912. 排序数组

文章目录 &#x1f348;1. 题目&#x1f34c;2. 算法原理&#x1f34f;3. 代码实现 &#x1f348;1. 题目 题目链接&#xff1a;912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 示例 1&#xff1a; 输入&am…

经典神经网络——VGGNet模型论文详解及代码复现

论文地址&#xff1a;1409.1556.pdf。 (arxiv.org)&#xff1b;1409.1556.pdf (arxiv.org) 项目地址&#xff1a;Kaggle Code 一、背景 ImageNet Large Scale Visual Recognition Challenge 是李飞飞等人于2010年创办的图像识别挑战赛&#xff0c;自2010起连续举办8年&#xf…

使用 Go 构建高性能的命令行工具

命令行工具&#xff08;CLI&#xff09;在软件开发中扮演着重要的角色&#xff0c;尤其是在自动化工具、开发工具链和服务器管理等领域。Go 语言以其简洁性和高性能而闻名&#xff0c;非常适合用来创建强大且高效的 CLI 工具。本文将详细介绍如何使用 Go 语言来构建 CLI 应用&a…

大三上oracle数据库期末复习

1、创建表空间 2、创建用户 3、用户授权 oracle数据库逻辑存储结构&#xff1a; 1、表空间&#xff08;最大的逻辑存储单元&#xff09; 创建表空间 2、段 3、盘区&#xff08;最小的磁盘空间分配单元&#xff09; 4、数据块&#xff08;最小的数据读写单元&#xff09; 用…

用JavaScript的管道方法简化代码复杂性

用JavaScript的管道方法简化代码复杂性 在现代 web 开发中&#xff0c;维护干净有效的代码是必不可少的。随着项目的增加&#xff0c;我们功能的复杂性也在增加。然而&#xff0c;javaScript为我们提供了一个强大的工具&#xff0c;可以将这些复杂的函数分解为更小的、可管理的…

Mybatis(1)

目录 Mybatis1.快速入门2.Mybatis介绍3.Mybatis工作示意图4.MyBatis 快速入门4.1.1创建monster表4.1.2 创建resources/mybatis-config.xml4.1.3 创建pojo类4.1.4 创建MonsterMapper接口4.1.5 创建MonsterMapper.xml4.1.6 mybatis-config.xml 引入Mapper.xml 文件4.1.6 创建SqIS…

索尼mxf覆盖部分恢复案例(索尼PMW-580)

索尼mxf覆盖部分恢复案例(索尼PMW-580) 索尼的摄像机型号是比较繁多的&#xff0c;高端系列基本上是以mxf文件为主&#xff0c;这一类案例之前处理不少&#xff0c;今天我们看一个索尼pmw-580摄像机删除后又覆盖的恢复案例。 故障存储:64G SD卡/Exfat文件系统 故障现象: 拍…

Tmux奇技淫巧

Tmux奇技淫巧 在日常的开发工作中&#xff0c;终端是我们最常用的工具之一。在终端中我们可以调用各种解释器&#xff0c;来执行命令&#xff0c;完成我们的工作。然而&#xff0c;对于只使用终端的默认功能的开发者来说&#xff0c;他们可能会错过一些强大的工具和技巧&#…

分享72个节日PPT,总有一款适合您

分享72个节日PPT&#xff0c;总有一款适合您 72个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/1k8e-tkj3SBcKbaipjQ9Deg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易…

『吴秋霖赠书活动 | 第五期』《Kubernetes原生微服务开发》

【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋友可以关注《爬虫JS逆向实战》&#xff0c;对分布式爬虫平…

速通CSAPP(一)计算机系统漫游入门

CSAPP学习 前言 一门经典的计组课程&#xff0c;我却到了大四才学。 anyway&#xff0c;何时都不会晚。 博主参考的教程&#xff1a;本电子书信息 - 深入理解计算机系统&#xff08;CSAPP&#xff09; (gitbook.io)&#xff0c;非常感谢作者的整理。 诚然去看英文版可以学…