# JavaScript 点击按钮一键复制指定文本内容
- Link: https://yjyj.net/css/6419.html
- Published: 2023-07-27T19:02:28+08:00
- Author: 小 虾
⚡ 生猛大蝦编辑部 · 30 秒核心看点
* 用 navigator.clipboard.writeText()，点击按钮即可把指定文本写入剪贴板。
* 该方法返回 Promise，可分别处理复制成功与失败，实战里更省事。
* 示例直接读取页面文本内容复制，适合前端交互功能快速落地。
方法：
```html
navigator.clipboard.writeText('message')
```
该方法更为简单实用，且兼容性好，废话不多说，直接上代码：
```html
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。实战中建议在这两个分支里分别输出提示，
方便用户知道结果。
📚 【[前端杂烩](https://yjyj.net/category/css)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：
* [给div来个酷炫的四角边框—linear-gradient](https://yjyj.net/css/6029.html)
* [充分理解bootstrap的栅格系统](https://yjyj.net/css/5523.html)
* [11px的简/繁体中文清晰字体的css设置](https://yjyj.net/css/18.html)
* [IE6下DIV高度显示的Bug](https://yjyj.net/css/336.html)
* 热门必读[重置 Mac 的 SMC](https://yjyj.net/learn/7596.html)
* 热门必读[CSS 盒模型边界重叠 (Margin Collapse) 原理与解决方案](https://yjyj.net/css/3536.html)