Click To Copy 的实现 [1/2] JavaScript实现复制内容到前切板
有三个主要的浏览器API用于实现复制内容到剪切板操作:
-
Async Clipboard API [navigator.clipboard.writeText]
- 在Chrome66(2018/08)中被支持,是一种较新的方案。
- 访问时异步执行,且支持Promise,可以编写安全用户提示(如果显示),且不会中断页面中的JavaScript。
- 文本可以直接从变量中复制
- 仅支持通过HTTPS部署的页面
- 处于安全考虑,活动选项卡中写入无权限提示,但是,浏览器从剪切板读取的时候会提示。
-
document.execCommand('copy')
-
大多数浏览器都支持,但是已经被MDN标注为过时(Obsolete)
-
访问是同步发生的,阻塞页面,停止JavaScript直到完成,包括显示和用户与任何安全提示进行交互。(在复制文本过大的时候,才会出现页面阻塞,这是目前大多数的实现方式)。
-
从DOM中读取文本并将其放置在剪贴板上。
-
在2015年4月〜测试期间,只有Internet Explorer被记录为在写入剪贴板时显示权限提示。
//经典实现 function copy(text) { var input = document.createElement('textarea'); input.innerHTML = text; document.body.appendChild(input); input.select(); var result = document.execCommand('copy'); document.body.removeChild(input); return result; }
一个完整示例:
HTML
<p id="para">this is for test</p> <button onclick="copy()">click</button>
JS
function copy() { let copydata = document.getElementById("para").innerHTML; copytext(copydata); }; function copytext(text) { let input = document.createElement("textarea"); input.innerHTML = text; document.body.appendChild(input); input.select(); var result = document.execCommand("copy"); document.body.removeChild(input); return result; }
-
-
覆写
copy
事件。- 剪切板相关文档 Overriding the copy event.
- 允许您通过任何复制事件来修改剪贴板上显示的内容,可以包含除纯文本之外的其他数据格式。
- 此处未涵盖,因为它不能直接回答问题。