實現前端點選按鈕自動複製剪貼簿功能

a1burning發表於2018-05-07
前端

【目錄】

  • 明確需求
  • html分析
    • 程式碼實現
  • css分析
  • js分析
    • 程式碼實現

只要是文字，長按選中就可以複製，但是需求來了擋也擋不住：

明確需求

為了提升使用者體驗，點選【複製】按鈕就自動複製到剪貼簿，那麼就需要前端實現這種功能了。

首先明確了需求就先看一下最終圖片：

copy.jpg

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();
  1. 然後複製到剪貼簿

兩行？看起來是不是很簡單？哈哈~那你就錯了，這裡面是有坑的。 第一目前沒有一個很完美的方法可以相容各個瀏覽器和移動端，引用外掛也是一樣的。 查了半天最好的辦法就是使用 document.execCommand("Copy") 相容性是不錯的：

use1.jpg
use.jpg

手機安卓支援到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，但是依然在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_韻七七

相關文章