关于本文
本文是通过利用生成式 AI 的自动化工作流创建的。我们查阅了 MDN 的 Clipboard API 文档，制作了一个仅在点击按钮时将字符串写入剪贴板的最小演示。未经浏览器实机重新确认。验证状态：📘 已确认 API 规范·未在浏览器实机上验证
信息确认日期：2026年10月3日。输入的字符串不会发送或保存到外部服务器。
网页上的“复制”按钮可以通过 JavaScript 将字符串写入剪贴板。这次我们不采用自动复制，而是仅在读者点击按钮时调用 navigator.clipboard.writeText()。
今天尝试的内容
在输入框中输入文字并点击“复制”，观察屏幕上显示 SUCCESS 或 FAILED 的全过程。
首先是实时演示
字符串仅在此页面内处理，不会发送或保存到外部服务器。即使浏览器不允许使用 Clipboard API，屏幕也会显示 FAILED。
最小代码
button.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(input.value);
result.textContent = "SUCCESS";
} catch (error) {
result.textContent = "FAILED: " + error.name;
}
});
flowchart LR
A["ユーザーがクリック"] --> B["writeText"]
B --> C{"利用可能?"}
C -->|Yes| D["Clipboardへ書込"]
C -->|No/拒否| E["FAILEDを表示"]
为什么要在点击后调用
像 Clipboard 这样对用户环境产生影响的 Web API，会受到浏览器安全条件和权限控制的影响。它的设计不是一打开页面就擅自复制，而是以明确的用户操作为入口。
修改一处
将输入的字符串从短字符更改为包含日文或换行的字符，复制后粘贴到文本编辑器中确认结果。
也在屏幕上显示失败信息
考虑到无法使用API的环境或不允许的情况，除了成功提示外，也会在屏幕上显示异常名称。即便是不会打开控制台的新手也能确认当前状态。
如果用于实际工作
可应用于通过单击复制管理后台ID、命令、模板文本等的UI。在将机密信息放入剪贴板的设计中，需要连同终端共享以及剪贴板历史记录一并考虑其处理方式。
查看此处即可理解其机制
这个实验有趣的地方不在于复制的文字本身，而在于“网页触及操作系统侧剪贴板的边界”。由于Clipboard API受到安全上下文等浏览器侧条件的影响，因此即使是相同的代码，也会因分发方式和权限状态的不同而导致成功或失败。
因此在实际的UI中，与其在暗中执行复制处理，不如以用户操作为入口，将成功或失败反馈到屏幕上的设计更能方便排查问题。由于在共享电脑上剪贴板历史中可能会残留机密值，因此不能采用“因为方便所以允许复制一切”的设计。
