明確需求
為了提升用戶體驗，點擊【復制】按鈕就自動復制到剪貼板，那么就需要前端實現這種功能了。
首先明確了需求就先看一下最終圖片：
html分析
左邊是一個input的文本框，只讀，右邊是一個按鈕。
代碼實現：
<!--左邊是一個input輸入框，要求只讀，而且里面的內容通過url?后面的code傳入--> <input type="text" value="AJS4EFS" readonly id="textAreas"/> <!--右邊是一個按鈕--> <a href="javascript:;" class="cuteShareBtn" id="copy">復制</a>
css分析
這種東西就跳過吧，不是重點。
js分析
- 點擊按鈕獲取input對象
解決方法：
- 如果使用的jquery，那么直接$("#textArea").select()選中的就是這個input對象
- 如果使用的zepto，上面的方法是獲取到的zepto對象是不支持原生select()方法的，那么就使用原生的辦法
var obj = document.getElementById("textAreas");obj.select();
- 然后復制到剪貼板
兩行？看起來是不是很簡單？哈哈~那你就錯了，這里面是有坑的。 第一目前沒有一個很完美的方法可以兼容各個瀏覽器和移動端，引用插件也是一樣的。 查了半天最好的辦法就是使用 document.execCommand("Copy") 兼容性是不錯的：
手機安卓支持到4.1、各種瀏覽器是可以的，但是唯獨ios是不支持的，來給我把刀，ios你這玩意你限制是干什么？是要保護手機安全還是咋的。 所以只是pc端 使用那么就下面幾行代碼就可以搞定了：
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); });
注意
使用range這種方案都不太好用！！！！復制不出來內容，還是需要使用select
更多移動端復制可參考
項目問題總結（四十五）《公司轉賬一鍵復制》：移動端如何實現點擊復制？復制時如何保留換行符？低版本如何兼容？
原生JS監聽復制事件，更改復制的內容，或者在復制內容后面追加參數
原生 JS 監聽 復制 copy 事件，追加版權信息：
<div class="empty-font">選中這一段文字，點擊 ctrl+C 或 者右鍵選擇復制</div>
<script type="text/javascript">
//監聽整個頁面的 copy 事件
document.addEventListener('copy',function(e){ // clipboardData 對象是為通過編輯菜單、快捷菜單和快捷鍵執行的編輯操作所保留的，也就是你復制或者剪切內容
let clipboardData = e.clipboardData || window.clipboardData; // 如果 未復制或者未剪切，直接 return
if(!clipboardData) return ; // Selection 對象 表示用戶選擇的文本范圍或光標的當前位置。 // 聲明一個變量接收 -- 用戶輸入的剪切或者復制的文本轉化為字符串
let text = window.getSelection().toString(); if(text){ // 如果文本存在，首先取消默認行為
e.preventDefault(); // 通過調用 clipboardData 對象的 setData(format,data) 方法，設置相關文本 // format 一個 DOMString 類型 表示要添加到 drag object 的拖動數據的類型 // data 一個 DOMString 表示要添加到 drag object 的數據
clipboardData.setData('text/plain', text + '\r\n這是追加的版權內容') } }) </script>
參考