夜间模式CodeSnippetStyle:
日间模式CodeSnippetStyle:

0%


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.
    • 允许您通过任何复制事件来修改剪贴板上显示的内容,可以包含除纯文本之外的其他数据格式。
    • 此处未涵盖,因为它不能直接回答问题。
posted @ 2020-08-11 10:18  暮冬有八  阅读(237)  评论(0编辑  收藏  举报
BACK TO TOP

😀迷海无灯听船行。Github WeChat