Click To Copy 的实现 [1/2] JavaScript实现复制内容到前切板

有三个主要的浏览器API用于实现复制内容到剪切板操作：

1. Async Clipboard API [navigator.clipboard.writeText]

   • 在Chrome66（2018/08）中被支持，是一种较新的方案。
   • 访问时异步执行，且支持Promise，可以编写安全用户提示（如果显示），且不会中断页面中的JavaScript。
   • 文本可以直接从变量中复制
   • 仅支持通过HTTPS部署的页面
   • 处于安全考虑，活动选项卡中写入无权限提示，但是，浏览器从剪切板读取的时候会提示。

2. 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;
     }
     

3. 覆写 copy 事件。

   • 剪切板相关文档 Overriding the copy event.
   • 允许您通过任何复制事件来修改剪贴板上显示的内容，可以包含除纯文本之外的其他数据格式。
   • 此处未涵盖，因为它不能直接回答问题。