實現前端點擊按鈕自動複製剪貼板功能

【目錄】

• 明確需求
• 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_韻七七