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

【目录】

• 明确需求
• html分析
  • 代码实现
• css分析
• js分析
  • 代码实现

只要是文本，长按选中就能够复制，可是需求来了挡也挡不住：

明确需求

为了提高用户体验，点击【复制】按钮就自动复制到剪贴板，那么就须要前端实现这种功能了。

首先明确了需求就先看一下最终图片：

html分析

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

代码实现：

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

css分析

这种东西就跳过吧，不是重点。

js分析

1. 点击按钮获取input对象

解决方法：

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

2. 而后复制到剪贴板

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

手机安卓支持到4.一、各类浏览器是能够的，可是惟独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，可是依然在iPhone5的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);
});
复制代码

这样就实现了前端点击按钮自动复制剪贴板的功能。 version1.0 —— 2018/5/6，首次建立实现前端点击按钮自动复制剪贴板功能 ©burning_韵七七