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

 

最近，一些項目中用到監聽用戶復制。剪切的操作。

案例1、在PC端，當用戶獲得一個京東卡的使用券，當用戶使用ctrl + C復制得到的使用券時，將使用券的代號復制到粘貼板，以便於用戶ctrl+v進行粘貼。

 

 

案例2：在移動端（android 和 iOS端），用戶獲得邀請碼之后，可以使用一鍵復制的功能，將邀請碼復制到剪切板，然后在app中進行兌換。

 

 

 使用jQuery中的方法監聽用戶的剪切、復制、粘貼的行為

 

$("#cut").on("cut",function(){
   alert("剪切");
});
$("#copy").on("copy",function(){
   alert("復制");
});
$("#paste").on("paste",function(){
   alert("粘貼");
});

 

這些行為包括使用鍵盤的ctrl + c操作，或者右擊鼠標—>復制等操作。

<input type="text" value="剪切板內容" id="clipboard"/>

$("#clipboard").on("paste",function(e){
    var eve = e.originalEvent;//所有js的原生事件都被保存到originalEvent中
    var cp = eve.clipboardData;//從originalEvent取出剪切板的事件
    var clipboardData = window.clipboardData||e.originalEvent.clipboardData; //兼容ie||chrome
    var data = clipboardData.getData('Text');//獲取剪切板內容
    console.log(data);
});

 

clipboardData對象

 

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

 

 

clipboardData兼容性

 

經過嘗試，clipboardData對象內兼容大部分px瀏覽器，像chrome，firefox、ie等，但是在手機端兼容性不是很好，目前clipboardData在ios上的safari瀏覽器無效，為解決移動端這個問題，我們引用一個js插件—— clipboard.js

 

clipboard.js插件

 

介紹

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

 

 

使用

在頁面中引入js

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

使用clipboard.js的自定義屬性

<!--使用data-clipboard-target屬性指定被復制的標簽-->
        <!--使用data-clipboard-action屬性指定一些操作，copy（復制），cut（剪切）-->
        <!--注意：cut 操作僅適用於<textarea>和<input>-->
        <div style="margin:2em">
            <textarea id="id_text"></textarea>
            <button type="button" id="id_copy"
                    data-clipboard-target="#id_text"
                    data-clipboard-action="copy">點擊復制
            </button>
        </div>

var clipboard = new Clipboard("#id_copy");
        clipboard.on("success",function (element) {//復制成功的回調
            console.info("復制成功，復制內容：    " + element.text);
        });
        clipboard.on("error",function (element) {//復制失敗的回調
            console.info(element);
        })
    });

高級用法：

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

 

瀏覽器兼容