javascript如何实现复制到剪贴板_有哪些现代API【教程】

苏承栈

2026-09-18 • 👁 0人浏览过

最可靠方式是 navigator.clipboard.writeText()，但需满足安全上下文（HTTPS/localhost）和用户手势触发；否则报错如“undefined”“Permission denied”或“Document not focused”。现代浏览器中，JavaScript 实现复制到剪贴板最可靠的方式是使用

navigator.clipboard.writeText()

，它取代了已废弃的

document.execCommand('copy')

。但直接调用该 API 有明确的限制条件，不是任何时候都能成功。为什么

navigator.clipboard.writeText()

会报错？这个 API 只能在安全上下文（HTTPS 或 localhost）中调用，且必须由用户手势（如

click

、

keydown

）触发 —— 不能在定时器、异步回调或页面加载完成时自动执行。常见错误信息：

"navigator.clipboard is undefined"

（旧版 Safari 或禁用权限时）

"Permission denied"

（未获用户授权，或非用户触发）

"Failed to execute 'writeText' on 'Clipboard': Document is not focused"

（页面失焦，尤其在 Electron 或某些 iframe 场景）如何安全调用

navigator.clipboard.writeText()

？必须确保：① 在事件处理器内；② 检查 API 是否可用；③ 捕获并处理拒绝情况。

button.addEventListener('click', async () => {
  if (!navigator.clipboard) {
    console.error('Clipboard API not supported');
    return;
  }
  try {
    await navigator.clipboard.writeText('Hello, world!');
    console.log('Copied!');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
});

不要省略

async/await

或

.catch()

，否则静默失败避免在

setTimeout

或

Promise.resolve().then()

中调用 —— 即使紧接在 click 后也会失去“用户手势”上下文 Safari 16.4+ 才支持

writeText()

，更早版本需降级方案需要兼容老浏览器怎么办？当

navigator.clipboard

不可用时，可回退到临时

</code></div>
+
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">execCommand</code></div>
，但仅限于用户触发且页面有焦点的场景（且
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">execCommand</code></div>
已被标记为废弃，Chrome 95+ 在非安全上下文中完全禁用）。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
Java免费学习笔记（深入）
”；
临时 textarea 必须
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">position: fixed; left: -9999px;</code></div>
，避免视觉跳动
必须先
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">select()</code></div>
再
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">execCommand('copy')</code></div>
，否则无效
务必在操作后立即
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">remove()</code></div>
临时元素，防止内存泄漏或重复绑定
此方式无法复制富文本或图片，仅适用于纯文本
复制富文本或 HTML 内容怎么处理？
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">navigator.clipboard.writeText()</code></div>
只支持字符串；若要复制带样式的 HTML（如从
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">contenteditable</code></div>
区域），需用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">navigator.clipboard.write()</code></div>
配合
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">ClipboardItem</code></div>
，但目前仅 Chromium 和 Firefox 支持，Safari 完全不支持。
示例写入 HTML：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">new ClipboardItem({ 'text/html': new Blob(['<b>Bold</b>'], {type: 'text/html'}) })</code></div>
注意 MIME 类型必须精确匹配，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">'text/plain'</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">'text/html'</code></div>
是两个独立粘贴项
移动端 WebView（如
微信
内置浏览器）普遍不支持
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">write()</code></div>
，务必降级到纯文本
真正容易被忽略的是：即使 API 调用成功，也无法保证用户实际粘贴出你期望的内容 —— 粘贴行为最终由目标应用决定，比如某些编辑器会过滤 HTML 标签，或纯文本编辑器只取
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">text/plain</code></div>
版本。所以，优先用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">writeText()</code></div>
，别为了“看起来高级”强行上
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">write()</code></div>
。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="jxgpc-article-nav" aria-label="文章导航">

    
                                <a href="http://www.jxgpc.com/pc/8955.html" class="jxgpc-article-nav-link jxgpc-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="jxgpc-article-nav-label">上一篇</div>
                                        <div class="jxgpc-article-nav-title">Next.js 13 API Route 动态渲染与缓存策略解析</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.jxgpc.com/pc/8971.html" class="jxgpc-article-nav-link jxgpc-article-nav-next">
                                    <div>
                                        <div class="jxgpc-article-nav-label">下一篇</div>
                                        <div class="jxgpc-article-nav-title">html如何实现页面中的文字自动转换为大写字母</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="jxgpc-content-section" style="margin-top: 20px;">
                        <h2 class="jxgpc-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="jxgpc-article-list">

    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8955.html" class="jxgpc-article-link">Next.js 13 API Route 动态渲染与缓存策略解析</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8874.html" class="jxgpc-article-link">typescript动态添加setter</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8865.html" class="jxgpc-article-link">如何自定义 scrollIntoView 平滑滚动的持续时间</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8863.html" class="jxgpc-article-link">Ngrx dispatch 序列调用：理解其执行机制与循环规避策略</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8851.html" class="jxgpc-article-link">jquery实现的V字形显示效果代码_jquery</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8971.html" class="jxgpc-article-link">html如何实现页面中的文字自动转换为大写字母</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8972.html" class="jxgpc-article-link">jquery转盘抽奖功能实现_jquery</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/8977.html" class="jxgpc-article-link">HTML关键词怎么设置_HTML关键词meta标签SEO作用</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/9048.html" class="jxgpc-article-link">web打印功能</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/9060.html" class="jxgpc-article-link">js内置对象 学习笔记_javascript技巧</a>
                                <div class="jxgpc-article-meta">2026-09-18</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="jxgpc-sidebar jxgpc-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">推荐阅读</h3>
        <div class="jxgpc-recommend-grid">

    
            <a href="http://www.jxgpc.com/pc/12871.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="bootstrap的form表单提交成功后，怎么清空表单内容_html/css_WEB-ITnose">
                </div>
                <div class="jxgpc-recommend-title">bootstrap的form表单提交成功后，怎么清空表单内容_html/css_WEB-ITnose</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/12867.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="如何为 React 列表中的每个子元素正确设置唯一 key 属性">
                </div>
                <div class="jxgpc-recommend-title">如何为 React 列表中的每个子元素正确设置唯一 key 属性</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/12864.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="深入解析：PayPal整合第二部分：PayPal REST API">
                </div>
                <div class="jxgpc-recommend-title">深入解析：PayPal整合第二部分：PayPal REST API</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/12860.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="index.html里如何设置首字下沉效果？">
                </div>
                <div class="jxgpc-recommend-title">index.html里如何设置首字下沉效果？</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">最新文章</h3>
        <ul class="jxgpc-article-list">

    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12871.html" class="jxgpc-article-link">bootstrap的form表单提交成功后，怎么清空表单内容_html/css_WEB-ITnose</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12867.html" class="jxgpc-article-link">如何为 React 列表中的每个子元素正确设置唯一 key 属性</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12864.html" class="jxgpc-article-link">深入解析：PayPal整合第二部分：PayPal REST API</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12860.html" class="jxgpc-article-link">index.html里如何设置首字下沉效果？</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12851.html" class="jxgpc-article-link">如何通过HTML的CSS :focus-within检测容器内任意子元素获得焦点的状态</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/12848.html" class="jxgpc-article-link">JavaScript 中实现按钮点击切换元素内容与样式的完整教程</a>
                <div class="jxgpc-article-meta">2026-09-25</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">热门标签</h3>
        <div class="jxgpc-article-tag-list">

    
            <a href="http://www.jxgpc.com/tag/2336" class="jxgpc-article-tag-item">safari</a>
    
            <a href="http://www.jxgpc.com/tag/1863" class="jxgpc-article-tag-item">java</a>
    
            <a href="http://www.jxgpc.com/tag/1827" class="jxgpc-article-tag-item">微信</a>
    
            <a href="http://www.jxgpc.com/tag/1699" class="jxgpc-article-tag-item">Javascript</a>
    
            <a href="http://www.jxgpc.com/tag/1682" class="jxgpc-article-tag-item">浏览器</a>
    
            <a href="http://www.jxgpc.com/tag/1665" class="jxgpc-article-tag-item">为什么</a>
    
            <a href="http://www.jxgpc.com/tag/1596" class="jxgpc-article-tag-item">html</a>
    
            <a href="http://www.jxgpc.com/tag/1590" class="jxgpc-article-tag-item">ai</a>
    
            <a href="http://www.jxgpc.com/tag/1585" class="jxgpc-article-tag-item">处理器</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="jxgpc-footer">
        <div class="jxgpc-container">
            <div class="jxgpc-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.jxgpc.com/22.html" class="jxgpc-footer-link">免责声明</a>
                
                <a href="http://www.jxgpc.com/23.html" class="jxgpc-footer-link">关于我们</a>
                
                <a href="http://www.jxgpc.com/24.html" class="jxgpc-footer-link">联系我们</a>
                
                <a href="http://www.jxgpc.com/25.html" class="jxgpc-footer-link">投诉删除</a>
                
                <a href="http://www.jxgpc.com/26.html" class="jxgpc-footer-link">投稿须知</a>
                
                
            </div>
            <div class="jxgpc-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 极星编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063994号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="jxgpc-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

    <!-- 公共脚本 -->
    <script src="http://www.jxgpc.com/static/v3/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>