实现前端点击按钮自动复制剪贴板功能

Question

只要是文本，长按选中就可以复制，但是需求来了挡也挡不住。

明确需求

为了提升用户体验，点击【复制】按钮就自动复制到剪贴板，那么就需要前端实现这种功能了。可能还需要兼容各种手机端和平板。

HTML

左边是一个 input 的文本框，只读，右边是一个按钮。

<!--左边是一个input输入框，要求只读，而且里面的内容通过url?后面的code传入-->
<input type="text" value="AJS4EFS" readonly/>
<!--右边是一个按钮-->
<a href="javascript:;" class="cuteShareBtn">复制</a>

JavaScript

点击按钮获取 input 对象

解决方法：

• 如果使用的 jquery，那么直接 $("#textArea").select() 选中的就是这个 input 对象
• 如果使用的 zepto，上面的方法是获取到的zepto对象是不支持原生 select() 方法的，那么就使用原生的办法 var obj = document.getElementById("textAreas"); obj.select();

然后复制到剪贴板

两行？看起来是不是很简单？哈哈~那你就错了，这里面是有坑的。 第一目前没有一个很完美的方法可以兼容各个浏览器和移动端，引用插件也是一样的。 查了半天最好的办法就是使用 document.execCommand("Copy") 兼容性是不错的。

手机安卓支持到 4.1、各种浏览器是可以的，但是唯独 ios 是不支持的，来给我把刀，ios 你这玩意你限制是干什么？是要保护手机安全还是咋的。 所以只是 pc 端，使用那么就下面几行代码就可以搞定了：

// 复制按钮事件绑定
$("#copy").on("tap",function(){
  //获取input对象
  var obj = document.getElementById("textAreas");
  //选择当前对象
  obj.select(); 
  try{
    //进行复制到剪切板
    if(document.execCommand("Copy","false",null)){
      //如果复制成功
      alert("复制成功！");  
    }else{
      //如果复制失败
      alert("复制失败！");
    }
  }catch(err){
    //如果报错
    alert("复制错误！")
  }
})

那如果是移动端 的话，就要兼容 IOS，但是依然在 iPhone 5 的 10.2 的系统中，依然显示复制失败，由于用户使用率较低，兼容就做到这里，那些用户你们就自己手动复制吧。 下面的两种方法都可以进行复制，因为核心代码就那么几行，先来简单的：

$("#copy").on("tap", function() {
  //获取input对象
  var obj = document.getElementById("textAreas");
  //如果是ios端
  if (isiOSDevice) {
    // 获取元素内容是否可编辑和是否只读
    var editable = obj.contentEditable;
    var readOnly = obj.readOnly;
    // 将对象变成可编辑的
    obj.contentEditable = true;
    obj.readOnly = false;
    // 创建一个Range对象，Range 对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域
    var range = document.createRange();
    //获取obj的内容作为选中的范围
    range.selectNodeContents(obj);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    obj.setSelectionRange(0, 999999); //选择范围，确保全选
    //恢复原来的状态
    obj.contentEditable = editable;
    obj.readOnly = readOnly;
    //如果是安卓端    
  } else {
    obj.select();
  }
  try {
    if (document.execCommand("Copy", "false", null)) {
      alert("复制成功！");
    } else {
      alert("复制失败！请手动复制！");
    }
  } catch (err) {
    alert("复制错误！请手动复制！")
  }
})

下面是一个比较完整的升级版方法，和插件 Clipboard.js 一样，不过代码不多，就直接拿来用好了。这个获取的不是 input 对象，而是需要复制的内容。

// 定义函数
window.Clipboard = (function(window, document, navigator) {
  var textArea,
      copy;

  // 判断是不是ios端
  function isOS() {
    return navigator.userAgent.match(/ipad|iphone/i);
  }
  //创建文本元素
  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.value = text;
    document.body.appendChild(textArea);
  }
  //选择内容
  function selectText() {
    var range,
        selection;

    if (isOS()) {
      range = document.createRange();
      range.selectNodeContents(textArea);
      selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      textArea.setSelectionRange(0, 999999);
    } else {
      textArea.select();
    }
  }

// 复制到剪贴板
  function copyToClipboard() {        
    try{
      if(document.execCommand("Copy")){
        alert("复制成功！");  
      }else{
        alert("复制失败！请手动复制！");
      }
    }catch(err){
      alert("复制错误！请手动复制！")
    }
    document.body.removeChild(textArea);
  }

  copy = function(text) {
    createTextArea(text);
    selectText();
    copyToClipboard();
  };

  return {
    copy: copy
  };
})(window, document, navigator);

使用函数

//使用函数
$("#copy").on("tap",function(){
  var  val = $("#textAreas").val();
  Clipboard.copy(val);
});

这样就实现了前端点击按钮自动复制剪贴板的功能。