H5 的复制操作

   <p>一开始，在 Web 端，并没有任何可以接触到 clipborad 的内容。以前，我们想要执行 copy/paste/cut 只能借助 flash。但现在，伟大的 H5 又或者说 W3C 推出了关于 H5 操控 clipboard 的草案。最出名的就是两个 API:</p>    <ul>     <li>document.execCommand()</li>     <li>ClipboardEvent</li>    </ul>    <p>我们一步一步来了解一下。先来看一下经典 execCommand 的使用。</p>    <h2><strong>复制操作</strong></h2>    <h3><strong>input 复制</strong></h3>    <p>我们需要先了解一下，基本的复制过程：</p>    <ul>     <li>选中（select）</li>     <li>复制（command + c || ctrl + c）</li>    </ul>    <p>实际效果就是：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/da0c0ee869e8362fc480c3e9beb0b485.png"></p>    <p>而，execCommand 也是遵循这一过程来实现这样的效果。如果我们想使用 execCommand 执行 copy 的话，那么应该先选中你想复制的元素。 这里,另外还会使用到一个新的 API, window.getSelection() 。具体来说就是：</p>    <ul>     <li>getSelection(): 用来获得当前选中的元素的内容。一般而言就是用鼠标选中页面上的内容。      <ul>       <li>toString(): 用来将选中的内容直接变为 text 文本。</li>      </ul> </li>    </ul>    <p>基本使用就是:</p>    <pre>  <code class="language-javascript">// 输出选中的文本  window.getSelection().toString();</code></pre>    <p>我们一般只是使用该 API 进行辅助作用。最常见的做法就是动态创建 input 元素，然后动态制定 input[value]。执行 select(), 进行选中，然后执行 copy 即可。</p>    <pre>  <code class="language-javascript"># 总的代码就是  function copyContent(elementId) {      // 动态创建 input 元素    var aux = document.createElement("input");      // 获得需要复制的内容    aux.setAttribute("value", document.getElementById(elementId).innerHTML);      // 添加到 DOM 元素中    document.body.appendChild(aux);      // 执行选中    // 注意: 只有 input 和 textarea 可以执行 select() 方法.    aux.select();        // 获得选中的内容      var content = window.getSelection().toString();          // 执行复制命令    document.execCommand("copy");      // 将 input 元素移除    document.body.removeChild(aux);    }</code></pre>    <h3><strong>任意复制</strong></h3>    <p>当然，如果你想不动态添加 input 元素，想直接 copy 的指定 DOM 元素的话，应该怎么做呢？这里就需要使用到 HTML5 新提供的 createRange() 相关方法。当然，上面的 getSelection() 也是其中之一。用到的 API 有:</p>    <ul>     <li>document.createRange(): 用来创建选中容器。返回一个 range Object。 该 API 的兼容性，也是挺好的， 手机端和 PC 端都支持 。      <ul>       <li>selectNode(DOM): 返回 range Object 上挂载的方法。用来添加选中元素。只能添加一个</li>      </ul> </li>     <li>window.getSelection()      <ul>       <li>addRange(range): 这个方法是挂载到 getSelection() 方法下的，用来执行元素的选中。（！很重要）</li>      </ul> </li>    </ul>    <p>上面 API 就这么一些:</p>    <p>这里，我贴一下关键代码:</p>    <pre>  <code class="language-javascript">var copyDOM = document.querySelector('#selector');      var range = document.createRange();      // 选中需要复制的节点    range.selectNode(copyDOM);    // 执行选中元素    window.getSelection().addRange(range);    // 执行 copy 操作  var successful = document.execCommand('copy');      try {        var msg = successful ? 'successful' : 'unsuccessful';        console.log('copy is' + msg);      } catch(err) {        console.log('Oops, unable to copy');      }  // 移除选中的元素    window.getSelection().removeAllRanges();</code></pre>    <p>这里需要额外提醒一下，不能自动执行上述 copy 操作。即，在没有任何用户交互操作下，是不能执行 copy 等交互行为的。所以，这里需要用到 click 事件来辅助（当然，你也可以使用其他事件来进行代替）。</p>    <h3><strong>使用 clipboard 复制</strong></h3>    <p>首先, clipboard 是最近提出来的，所以它的兼容性还是需要等待时间去验证的， 目前的兼容性是支持一些简单的 event 。 如果，你的浏览器支持 ClipboardEvent Constructor 的话。那么 复制操作就变得异常简单。</p>    <pre>  <code class="language-javascript">// 当然，下面的代码应该放在某个交互的 click 事件中。  var copyEvent = new ClipboardEvent('copy', {              dataType: 'text/plain',              data: 'My string'          });          document.dispatchEvent(copyEvent);</code></pre>    <p>如果没有的话，就只能使用在 document 的 copy 事件中返回的 event.clipboardData API 来设置或者获取相关的信息。我们获得 clipboardData 对象只能通过事件回调来实现:</p>    <ul>     <li>e.clipboardData: 只能通过 document 上的copy/paste/cut 事件来获取</li>    </ul>    <pre>  <code class="language-javascript">document.addEventListener('copy', function(e){      // 设置信息，实现复制      e.clipboardData.setData('text/plain', 'Hello, world!');      e.preventDefault();   });</code></pre>    <ul>     <li>clipboardData: 该 obj 还挂载两个常用的 API      <ul>       <li>setData(format, data): 设置相关的数据信息，主要用于 copy 和 cut 的相关事件中。        <ul>         <li>format: 就是基本的 MIME type。最常用的就是 text/plain 。</li>         <li>data: 就是对应 MIME type 放入的具体数据内容</li>        </ul> </li>       <li>getData(format): 一般用于 paste 事件中。用来获取 clipboard 里面的内容。不过，需要制定正确的解码格式（就是设置好正确的 MIME type）。并且，该方法只能在 paste 事件中使用。</li>      </ul> </li>    </ul>    <p>上面感觉就是简单的介绍一下 API，接下来正式说一些干货。如果使用 clipboardData 实现自定义复制内容。这样，你不仅仅可以复制页面上简单的 text 文本，还可以复制图片信息等。</p>    <p>看代码</p>    <pre>  <code class="language-javascript">// 在指定 DOM 上绑定交互事件  DOM.addEventListener('click',function(){},false){      // 添加 copy 内容      document.addEventListener('copy',function copy (e) {              msg = `<${msg}/>`;              e.clipboardData.setData('text/plain', msg);              e.preventDefault();          })      // 执行 copy 命令      document.execCommand('copy');      // 移除绑定事件      document.removeEventListener('copy','copy');  }</code></pre>    <h2><strong>cut && paste 相关</strong></h2>    <p>前面看起来也挺简单的。当然，有同学会想，不是还有其他事件比如 cut , paste 吗？是不是也可以这么做呢？ 额… 一开始，我也是这么想的，但现实往往会给您一个轻轻的爱抚。因为，为了防止你恶意的获取用户信息，在 Chrome 中，一般而言你是不能通过 document.execCommand('paste') 触发 paste 事件。不过，在手机端中，规矩是，你可以在可编辑的元素中触发 cut 和 paste , 只能在有效的 选中 元素中，触发 copy。</p>    <p>根据上面的说法，我们可以通过利用 paste 的相关方法，来具体应用到实践中。比如，防止用户粘贴信息。这特别适用于那些做题页面，防止你查资料然后 copy 相关答案。</p>    <pre>  <code class="language-javascript">document.addEventListener('paste',function copy (e) {              e.preventDefault();          });</code></pre>    <p>当然，还有更狠的，直接禁止 copy ， paste ， cut 事件。</p>    <pre>  <code class="language-javascript">['cut', 'copy', 'paste'].forEach((event)=>{      document.addEventListener(event, (e)=>{          e.preventDefault();      });  });</code></pre>    <h2><strong>方案总结</strong></h2>    <p>HTML5 现在能完美提供给我们的应该就是 copy 事件的使用，对于市面上的 clipboard.js 差不多也是运用上述的知识点。根据上面的描述，可以了解到，想要实现复制功能有三种渐进退化方案。以下兼容性由高到低：</p>    <ul>     <li>input 模式</li>     <li>createRange</li>     <li>clipboard 直接操作</li>    </ul>    <p>现在 React 比较火，这里我简单的写了一个 copybtn 组件 。具体的使用 README 已经写清楚了，如果有什么不懂的地方可以 @我。</p>    <p> </p>    <p>来自：https://www.villainhr.com/page/2016/11/27/H5 的复制操作</p>    <p> </p>