记：通过js完成复制(h5)

有这样一个需求，用户点击或其它（例如双击事件）操作后，需要复制一段文字，实现有三种方式。

1.input 复制

基本的复制过程：
选中（select）
复制（command + c || ctrl + c）
类似于下图

复制

最常见的做法就是动态创建 input 元素，然后动态制定 input[value]。执行 select(), 进行选中，然后执行 copy 即可。

 总的代码就是
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);

}

2.任意复制

如果你想不动态添加 input 元素，想直接 copy 的指定 DOM 元素的话，应该怎么做呢？这里就需要使用到 HTML5 新提供的 createRange() 相关方法。当然，上面的 getSelection() 也是其中之一。用到的 API 有:

• document.createRange(): 用来创建选中容器。返回一个 range Object。
• selectNode(DOM): 返回 range Object 上挂载的方法。用来添加选中元素。只能添加一个
• window.getSelection()
• addRange(range): 这个方法是挂载到 getSelection() 方法下的，用来执行元素的选中。（！很重要）

   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();

注：该方式被复制的节点一定是可见的。

3.使用 clipboard 实现自定义复制内容

clipboardData: 该 obj 还挂载两个常用的 API

• setData(format, data): 设置相关的数据信息，主要用于 copy 和 cut 的相关事件中。
• format: 就是基本的 MIME type。最常用的就是 text/plain。具体内容可以参考 MIME references
• data: 就是对应 MIME type 放入的具体数据内容
• getData(format): 一般用于 paste 事件中。用来获取 clipboard 里面的内容。不过，需要制定正确的解码格式（就是设置好正确的 MIME type）。并且，该方法只能在 paste 事件中使用。

// 在指定 DOM 上绑定交互事件
DOM.addEventListener('click',function(){},false){
    // 添加 copy 内容
    document.addEventListener('copy',function copy (e) {
            e.clipboardData.setData('text/plain', "copy text");
            e.preventDefault();
        })
    // 执行 copy 命令
    document.execCommand('copy');
    // 移除绑定事件
    document.removeEventListener('copy','copy');
}

原文链接