js複製內容到剪切板，兼容pc和手機端，支持Safari瀏覽器

時間 2019-11-26

標籤複製內容剪切板兼容手機支持 safari 瀏覽器欄目 JavaScript 简体版

原文原文鏈接

最近，一些項目中用到監聽用戶複製。剪切的操做。javascript

Javascript原生有一些事件：copy、paste、cut，java

這些事件能夠做用的目標元素：ios

　　能得到焦點的元素 (如contentEditable內容能編輯或者能夠選中的元素)，或者是<body>git

 1         <div id="cardList">
 2             <div class="btn">點擊我，複製我</div>
 3         </div>
 4         
 5         
 6         
 7         <script type="text/javascript">
 8             
 9             function copy(str){
10                 var save = function (e){
11                     e.clipboardData.setData('text/plain',str);//下面會說到clipboardData對象
12                     e.preventDefault();//阻止默認行爲
13                 }
14                 document.addEventListener('copy',save);
15                 document.execCommand("copy");//使文檔處於可編輯狀態，不然無效
16             }
17                     
18             document.getElementById('cardList').addEventListener('click',function(ev){
19                  copy(ev.target.innerText)
20             })
21                 
22         </script>

使用jQuery中的方法監聽用戶的剪切、複製、粘貼的行爲：github

1 $("#cut").on("cut",function(){
2    alert("剪切");
3 });
4 $("#copy").on("copy",function(){
5    alert("複製");
6 });
7 $("#paste").on("paste",function(){
8    alert("粘貼");
9 });

這些行爲包括使用鍵盤的ctrl + c操做，或者右擊鼠標—>複製等操做。chrome

Evevt.clipboardData 對象瀏覽器

clipboardData是JavaScript剪切板對象，該對象提供了3個經常使用方法：spa

　　clearData(): clipboardData對象從剪切板刪除一種或多種數據格式（一個參數：數據類型）firefox

　　getData(): clipboardData對象從剪切板獲取指定格式的數據（一個參數：數據類型）插件

　　setData(): clipboardData對象賦予指定格式的數據（兩個參數：數據類型，要賦予的值）

　　*數據類型通常爲「"text/plain" 」

Evevt.clipboardData 對象兼容性問題

　　通過嘗試，clipboardData對象內兼容大部分px瀏覽器，像chrome，firefox、ie等，可是在手機端兼容性不是很好，

　　目前clipboardData在ios上的safari瀏覽器無效，爲解決移動端這個問題，咱們引用一個js插件——clipboard.js

　　clipboard.js依賴於HTML5推出的Selection API和execCommand API

　　使用：

　　在頁面中引入

1 <script src="clipboard.min.js"></script>

　　使用clipboard.js的自定義屬性

 1 　　　　 <!--使用data-clipboard-target屬性指定被複制的標籤-->
 2         <!--使用data-clipboard-action屬性指定一些操做，copy（複製），cut（剪切）-->
 3         <!--注意：cut 操做僅適用於<textarea>和<input>-->
 4         <div style="margin:2em">
 5             <textarea id="id_text"></textarea>
 6             <button type="button" id="id_copy"
 7                     data-clipboard-target="#id_text"
 8                     data-clipboard-action="copy">點擊複製
 9             </button>
10         </div>

1 　　 var clipboard = new Clipboard("#id_copy");
2         clipboard.on("success",function (element) {//複製成功的回調
3             console.info("複製成功，複製內容：    " + element.text);
4         });
5         clipboard.on("error",function (element) {//複製失敗的回調
6             console.info(element);
7         })
8     });

　　高級用法

1 　　 //清理Clipboard對象
2     var clipboard = new Clipboard('.btn');
3     clipboard.destroy();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。