---
title: "JavaScript 点击按钮一键复制指定文本内容"
url: "https://yjyj.net/css/6419.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2023-07-27T19:02:28+08:00"
updated_at: "2025-01-19T23:04:19+08:00"
categories: "前端杂烩"
tags: "JavaScript, 一键复制, 前端开发实战, 服务器安全, 点击按钮复制"
summary: "本文讲解如何用 JavaScript 的 navigator.clipboard.writeText() 实现点击按钮一键复制指定文本，省去传统复制方案的繁琐步骤。适合前端入门与实战场景，重点说明复制成功/失败的 Promise 处理方式，直接给出可运行示例，拿来就能用。"
source: "生猛大蝦 (https://yjyj.net)"
---

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

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/css/6419.html) · 作者：小 虾 · 发布时间：2023-07-27

## 30 秒核心看点 (TL;DR)

- 用 navigator.clipboard.writeText()，点击按钮即可把指定文本写入剪贴板。
- 该方法返回 Promise，可分别处理复制成功与失败，实战里更省事。
- 示例直接读取页面文本内容复制，适合前端交互功能快速落地。

方法：

```
navigator.clipboard.writeText('message')
```

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

```

  
    
    
    
    Document
  
  
    这段文本将被复制

    点击复制
    
  

```

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

Via. [https://www.jianshu.com/p/601f6d4683bd](https://www.jianshu.com/p/601f6d4683bd)

## 延伸问答与排错指南 (FAQ)

### JavaScript 怎么实现点击按钮复制文本？
最直接的做法是监听按钮 click 事件，在回调里调用 navigator.clipboard.writeText(文本)。它会把字符串写入系统剪贴板，并返回 Promise，成功后进入 then，失败则进入 catch，便于做提示或兜底处理。

### navigator.clipboard.writeText 复制的是哪段内容？
它复制的是你传入的字符串。示例里通常会先用 document.querySelector 获取文本元素，再读取 textContent 作为参数传给 writeText，这样就能把页面上指定区域的内容一键复制出去。

### 复制成功和失败要怎么处理？
writeText 返回 Promise，复制成功时走 resolve，对应 then；如果浏览器权限不足或环境不支持写入剪贴板，则会 reject，对应 catch。实战中建议在这两个分支里分别输出提示，方便用户知道结果。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)