JavaScript 点击按钮一键复制指定文本内容

生猛大蝦

俩月了, DMIT 终于补货了! – 生猛大蝦 DMIT 全线缺货, 只剩搬瓦工了 – 生猛大蝦 Windows 下将 git 中的 bin 添加到环境变量 – 生猛大蝦 windows 环境下无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 – 生猛大蝦无法加载文件 xxx，因为在此系统上禁止运行脚本的解决办法 – 生猛大蝦 📊 Shopify Sessions 表完整字段参考 – 生猛大蝦 Shopify Sessions 数据维度表 – 生猛大蝦解锁 Shopify 与自建站商家的“代理式电商” (Agentic Commerce) 潜力 – 生猛大蝦 N.eko 解决 unknown event type: signal/close 的问题. – 生猛大蝦 1Panel 部署 N8N 简单配置 – 生猛大蝦 DMIT 传家宝又补货了! 错过拍断大腿 – 生猛大蝦跨境电商 AI Prompts – 生猛大蝦 Matomo 配置数据库优化 – 生猛大蝦搬瓦工 DC1 美西三网优化，年仅36刀！ – 生猛大蝦 DMIT – LAX.Pro.PalmSpring，洛杉矶CN2 GIA ，年付$100 USD 补货啦! – 生猛大蝦节点插件的白名单 mini 版, 救了我的破电脑 – 生猛大蝦 cannot change locale (en_US.UTF-8) 报错 – 生猛大蝦用 .htaccess 和 .htpasswd 加固 WordPress 后台 – 生猛大蝦 macOS 禁止 OneDriver 自动更新 – 生猛大蝦重置 Mac 的 SMC – 生猛大蝦 Debian 12/11 开启 BBR – 生猛大蝦升级&安装最新版 golang-go – 生猛大蝦【补货】DMIT 36.9传家宝补货三网GIA回程! 39.9也补了!三网CMIN2! – 生猛大蝦快速配置反代 – 生猛大蝦批量调整 Google GMC API Feed UTM 设置 – 生猛大蝦复活几万块买的斐讯R1 – 生猛大蝦彻底删除docker – 生猛大蝦宝塔安装 nginx 失败 – 生猛大蝦瓦工又补货了，库存还是很充足，希望黒五不要背刺 – 生猛大蝦 MySQL 设置优化记录 – 生猛大蝦

JavaScript 点击按钮一键复制指定文本内容 – 生猛大蝦

小虾 · 2026-05-13 · via 生猛大蝦

方法：

navigator.clipboard.writeText('message')

该方法更为简单实用，且兼容性好，废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="message">这段文本将被复制</div>
    <button class="btn">点击复制</button>
    <script>
      const copyEl = document.querySelector('.message')
      const btnEl = document.querySelector('.btn')

      btnEl.addEventListener('click', () => {
        // 该方法可以写入特定字符串到操作系统的剪切板，并返回一个Promise
        // 一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）
        navigator.clipboard
          .writeText(copyEl.textContent)
          .then(() => {
            console.log('复制成功')
          })
          .catch(() => {
            console.log('复制失败')
          })
      })
    </script>
  </body>
</html>

该方法可以写入特定字符串到操作系统的剪切板，并返回一个Promise，复制成功调用resolve，复制失败调用reject，比方法一更方便快捷。选他就完事了。

Via. https://www.jianshu.com/p/601f6d4683bd

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

生猛大蝦