当前位置: 首页 > news >正文

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.lryc.cn/news/252975.html

相关文章:

  • 【Linux】echo命令使用
  • Day03 嵌入式---中断
  • wpf devexpress 使用IDataErrorInfo实现input验证
  • shell_81.Linux在命令行中创建使用函数
  • 鱼香ROS一键安装命令(支持微信、docker、ros等)
  • 深入理解 Go 函数:从基础到高级
  • 开启三层交换机DHCP服务
  • jspdf+html2canvas浏览器缩放问题
  • 西南科技大学模拟电子技术实验六(BJT电压串联负反馈放大电路)预习报告
  • JS的监听事件
  • JS Object.values()
  • 基于Java SSM人力资源管理系统
  • 人工智能和程序员
  • Unity优化篇:对于unity DrawCall/Mesh/纹理压缩/内存等方面的常规调试和优化手段
  • 学生信息管理系统
  • 纯代码压缩WordPress前端Html
  • Elasticsearch分词器--空格分词器(whitespace analyzer)
  • 【LeetCode】692. 前K个高频单词
  • 在Windows操作系统上使用rtsp simple server和ffmpeg推送录屏视频流
  • 互联网摸鱼日报(2023-12-05)
  • Android 项目的依赖方式
  • ArcGIS提取DEM中的山脉范围
  • 漏洞复现--万户ezoffice wpsservlet任意文件上传
  • TCPDUMP抓包明确显示IP地址和端口号
  • java FTP客户端获取文件流假死问题
  • python使用记录
  • 【Vulnhub 靶场】【Coffee Addicts: 1】【简单-中等】【20210520】
  • codeforces每日两道思维题(第 二 天)
  • 【网络安全】-常见的网站攻击方式详解
  • ElasticSearch学习笔记(一)