答案：使用 Clipboard API 可在网页中实现复制功能，通过 navigator.clipboard.writeText() 将文本写入剪贴板，需用户点击触发且仅在 HTTPS 或 localhost 环境下可用，兼容旧浏览器可降级使用 execCommand。
在网页中实现内容复制功能，可以直接使用浏览器提供的 Clipboard API，无需依赖 Flash 或复杂的库。现代浏览器都支持这一原生接口，操作简单且安全。
1. 使用 Clipboard API 实现复制
核心方法是调用 navigator.clipboard.writeText()，它会将指定文本写入系统剪贴板。
示例代码：
function copyText(text) { navigator.clipboard.writeText(text) .then(() => { alert('复制成功！'); }) .catch(err => { console.error('复制失败:', err); });}
你可以在 HTML 中这样调用：
立即学习“前端免费学习笔记（深入）”；
腾讯智影-AI数字人
基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播
73 查看详情
2. 复制输入框中的内容
如果想复制用户在输入框（input 或 textarea）里填写或选中的内容，可以先获取选中部分再执行复制。
function copyFromInput(inputId) { const input = document.getElementById(inputId); const text = input.value.substring(input.selectionStart, input.selectionEnd) || input.value; navigator.clipboard.writeText(text) .then(() => { alert('已复制到剪贴板'); }) .catch(err => { console.error('复制失败:', err); });}
HTML 示例：
3. 注意事项与兼容性
需要在 HTTPS 环境 或本地开发环境（localhost）下运行，否则部分浏览器会拒绝访问剪贴板。 用户必须有明确交互行为（如点击按钮）触发复制，不能自动静默复制。 某些旧浏览器（如 IE）不支持该 API，可做降级处理，例如使用 document.execCommand(“copy”)（已废弃但仍有兼容价值）。
4. 完整简易接入方案
以下是一个通用的小函数，兼容现代和较老浏览器：
function simpleCopy(text) { if (navigator.clipboard) { // 现代方式 navigator.clipboard.writeText(text).catch(err => { console.error('异步复制失败', err); }); } else { // 降级：创建临时 textarea 并使用 execCommand const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); console.log('同步复制成功'); } catch (err) { console.error('execCommand 复制失败', err); } document.body.removeChild(textarea); }}
基本上就这些。只要几行代码就能让网页具备复制能力，关键是理解 Clipboard API 的使用条件和用户交互要求。
以上就是html函数如何实现内容复制功能 html函数剪贴板API的简易接入的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/620892.html
微信扫一扫 
支付宝扫一扫 
